Arch linux x86 Brave (chromium based) Screenshorts - attached Setps: i. GOTO Quran.com/calander ii. Scroll down to the FAQ section (accordion componet) iii. open any accordion iv. Notice the presence of \n (newline characters) rendered as plain text ISSUE: The issue appears to stem from rendering JSON content directly as a string inside a component. Newline characters (\n) are not interpreted as line breaks in HTML, and rendering them as-is could potentially introduce formatting issues and pose a security risk if unsafe methods like dangerouslySetInnerHTML are used. SOlUTION: (well i am too lazy and dumb to go on coding atleast yet my mind is a mess) The problem is based on the rendering of the json data inside a component if the string asis is allowed. it would be a serious security risk and to overcome it one of the most safest way i can/could find was to create a seprate component and then let the browser itself render the new line instead of manually triggering it. In other words a maintainable approach is to let the browser handle newline characters by using white-space: pre-line in CSS. EXAMPLE CODE: const RenderNewLine = ({ text }) => { return ( <div style={{ whiteSpace: 'pre-line' }}> {text} </div> ); }; // Usage: const jsonFromApi = { accordion1: { question: "How can I personalize my reading experience?", answer: "On Quran.com, go to the settings menu to:\n• Adjust font sizes and styles\n• Switch between light, dark, and sepia mode\n• Choose from multiple available translations\n\nThis makes it easy for anyone to participate in the language they understand best, and with a translation that is clear and informative." } }; <RenderNewLine text={jsonFromApi.accordion1.answer} /> Note: The above solution avoids using unsafe HTML injection and keeps the JSON clean. This makes it more maintainable and secure. i24k3