The react function is malfunctioning and not displaying a line break in this paragraph

After much searching and experimentation, I am still unable to create a new line in this React function.

It seems like a basic issue, but as a newcomer, I would appreciate any advice. One suggestion was to use the following CSS:

.new-line {
  white-space: pre-line;
}

I tried implementing the suggested CSS, but it did not solve the problem. Could this be related to the file extensions used in JavaScript?

import React from "react";
import Badge from "../elements/Badge";
import Resume from "../../resume.json";

function AboutMe() {
  return (
    <section className="section has-background-link" id="aboutMe">
      <div className="container has-text-centered">
       ... (Code continues)
      </div>
    </section>
  );
}

export default AboutMe;

I'm only using one CSS file

html {
    scroll-behavior: smooth;
}
... (Continues with CSS styles)

Index.html

<!DOCTYPE html>
<html lang="en">
   <head>
     ... (Continues with head section of HTML document)
   </head>
   <body>
     ... (Continues with body section of HTML document)
   </body>
</html>

Answer №1

Greetings fellow developers! It appears that your issue is not related to React.js, but rather HTML/CSS. I suggest focusing your search on how to implement a newline in HTML/CSS instead of mentioning React, as it is not the cause of the problem. Rest assured, the .js extension is not the culprit here :)

For easier debugging, try isolating the HTML code in a separate .html file without any React components and see if the issue persists. You'll likely find that React has no impact on the outcome.

You might want to experiment with margin-bottom and padding-bottom properties as well for some additional insights. Feel free to share a JSFiddle link for a live demo review.

UPDATE: Upon further examination, there could be a JavaScript error overlooked initially

I recommend making the following adjustment:

<p>{"test Give me a new line now<br>yes I love it"}</p>

Update it to:

<p>test Give me a new line now<br />yes I love it</p>

You cannot embed HTML/React elements within a string like that as they will not be interpreted correctly.

Answer №2

To avoid delving too deeply, I will build on Antonio's response. To pinpoint the issue, try using a console.log statement in your browser:

console.log("test Give me a new line now\nyes I love it")

The problem lies in replacing the
tag with a newline character \n within a sanitized text string.

While some template engines may allow HTML injection into the text string, a simple newline character seems to be the solution you seek.

Answer №3

Consider utilizing the backtick symbol for your code formatting. While it may not be perfect, it should suffice for your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure the header expands to fill the entire width when zooming out?

When I try to zoom out, the header does not extend to the full width of the page. I have included two images for reference - the first image shows how it should look when zooming out, while the second one depicts the issue where the header does not occupy ...

JavaScript basics: How to show temperature data within the Inner HTML

I am currently enrolled in a beginner's JavaScript course, and I am new to the world of programming. My project involves creating a program that can convert temperatures from Celsius to Fahrenheit or vice versa based on the selection made using radio ...

Guide on associating user IDs with user objects

I am currently working on adding a "pin this profile" functionality to my website. I have successfully gathered an array of user IDs for the profiles I want to pin, but I am facing difficulties with pushing these IDs to the top of the list of profiles. My ...

When an option is chosen from the dropdown menu in react-select

Recently, I encountered an issue while working with the react-select dropdown in my project. After selecting an option from the dropdown, I noticed that all the option backgrounds turned blue. Upon inspection, I found that all options had the class name "r ...

Developing a loader feature in React

I've been working on incorporating a loader that displays when the component has not yet received data from an API. Here's my code: import React, {Component} from 'react' import './news-cards-pool.css' import NewsService fro ...

Utilize the `document.getElementById` method to trigger both function 2 and form 2 when clicked

Hey there, I'm having some issues with my code and would appreciate some help. After a user submits my form with the ID of 'fwrdform' using the onclick event, I want to also trigger another function from my 'logout-form' so that t ...

Record details to text file after the button is clicked on ASP.NET

My goal is to save an integer value (incremented each time a button is pressed) into a .txt file for each individual. However, I am struggling with how to store the value of each person's button click. I have a method in mind, but I need assistance wi ...

How come the value passed to the component props by getServerSideProps is incorrect?

I have been facing an issue while trying to retrieve data from 4 different endpoints and then passing them as props using getServerSideProps in Next.js. Even though the "courses" variable returned from getServerSideProps does contain the necessary course ...

Unable to access the property '__reactAutoBindMap' as it is undefined

I've been struggling with setting up server side rendering with React for the past week. It's a new project using an express server and I'm trying to render a simple hello world react app that utilizes react-router-component. To get some he ...

Using React, Formik, React-select, and Firebase to implement a multi-select array in a Formik form

I've been working on building a form in React using React, Formik, react-select, and Firebase (cloud firestore). Everything was running smoothly until I tried to implement multiple instances of react-select. Whenever I attempt to use more than one dro ...

Embed Text inside an HTML Canvas

As someone who is relatively new to working with html canvas, I am having a bit of trouble when it comes to containing text within the canvas area. Specifically, I am pulling text from a textarea and displaying it on the canvas, but it seems to stay as one ...

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

The dynamically inserted nested division within a bootstrap grid does not occupy the entire width of the parent division

I am working with a parent div where I am dynamically adding smaller divs with content to achieve a specific layout. Here's how the structure looks: https://i.sstatic.net/tN1s1.png The code for the parent div is shown below: <div class="row" sty ...

Can we iterate through an array containing arrays of objects in a loop?

Here is an example of how I want my solution to appear: https://i.sstatic.net/B9AW1.png Currently, I have created an array where I group items by their first letter, like this: const grouped = _.groupBy(topicPages, key => key.relatedTopic.title[0]); ...

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

The clash of names between tags and classes in Tumblr themes can cause conflicts

I have discovered a method to customize the style of different posts based on their respective "#tags" using {TagsAsClasses}: <div class="post {TagsAsClasses}"> div.tag { /* customize styling here */ } While this approach works well, I encount ...

What is the best way to set up Webpack for a React application that includes Express.js, GraphQL, and separate client and server folders

I'm seeking guidance and suggestions for setting up and configuring webpack in a React application that consists of both client and server folders, utilizing Express.js and GraphQL. https://i.stack.imgur.com/dRXzp.png Someone suggested running webpa ...

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

I currently have a form set up that is functioning properly, but I am looking to make some changes. Instead of redirecting the user to a new page with a success message upon submitting the form, I want the success message to be displayed in a div next to t ...

Creating a React header with a scroll-triggered shadow effect using Tailwind CSS

Is there a way to dynamically add a shadow to a header in React based on the scroll position? I want the header to have no shadow when the scrollbar is at its initial (0) position, and then add a shadow as the user scrolls. Below is the code snippet for th ...

Ways to verify if an element contains no content and then eliminate that element using jQuery

I am currently attempting to identify any h2 element within a specific div that contains no content and then delete it. Below is the HTML code I am working with: <div class="skipToContainer"> <h2 class="vidSkipTo">Hello </h2> ...