Having issues getting a newline on my code

Question

class Test extends React.Component{
state={name: "John", numTimes: 2};

render() {
  let output = ""

  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2

    if (evenOdd === 0) {
      output += i + ". Hello " + this.state.name + "!"
    } else {
      output += i + ". Hello " + this.state.name
    }
  }

  return <p>{output}</p>
}

}
ReactDOM.render(<Test /> , document.getElementById("react"));

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

I am setting up an application where it will take a users name by input and how many times they want their name to display.

I have tried styling it, adding my own break line to the output either using "\n" and breaklines.

render() {
  let output = ""

  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2

    if (evenOdd === 0) {
      output += i + ". Hello " + this.state.name + "!"
    } else {
      output += i + ". Hello " + this.state.name
    }
  }

  return <p>{output}</p>
}

My for loop it will print out ! on even and nothing on odd so if they do 2 for the number the desired outcome would be

1. Hello John
2. Hello John!

etc...

I don't get any errors just an incorrect output of...

Hello John 2. Hello John!

line break in HTML would be a br tag, but it would make more sense to write the HTML on the page instead of trying to build a string with the format. — epascarello, Jun 07 '19 at 14:14
add a `+ '
'` if you want a newline - `\n` is not interpreted by your browser unless you use `white-space:pre` on the container — Pete, Jun 07 '19 at 14:27
[This answer](https://stackoverflow.com/questions/5782409/why-doesnt-javascript-newlines-work-inside-html#answer-5782558) in the duplicate explains it best — Pete, Jun 07 '19 at 14:33

score 2 · Accepted Answer · answered Jun 07 '19 at 14:31

2

Try using div as its a block level element so it will automatically go to next line

let output= []
  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2
    if (evenOdd === 0) {
      output.push(<div key={i}>{i + ". Hello " + this.state.name + "!"}</div>) 
    } else {
      output.push( <div key={i}>{i + ". Hello " + this.state.name}</div>)
    }
  }

answered Jun 07 '19 at 14:31

Atul

3,013
2
12
15

div cannot be a child of p – Pete Jun 07 '19 at 14:34
1

That worked my friend kudos. – Jem Jun 07 '19 at 14:40

n3dx · Answer 2 · 2019-06-07T14:30:52.027

0

Try this:

 let output = ""
      for (let i = 1; i <= this.state.numTimes; i++) {
        let evenOdd = i % 2
        if (evenOdd === 0) {
          output += i + ". Hello " + this.state.name + "!"+'\n'
        } else {
          output += i + ". Hello " + this.state.name
        }
      }
return <p>{{output}}</p>

edited Jun 07 '19 at 14:30

answered Jun 07 '19 at 14:13

n3dx

109
6

What is the difference with what's posted in the question? – Prerak Sola Jun 07 '19 at 14:15
Hi I see you added an extra bracket to {{output}}. Maybe you had some more code to add to it? – Jem Jun 07 '19 at 14:17
Yeah,I thought that was problem but I am solving it on my own now,it is not.Something inside of loop is causing problem. – n3dx Jun 07 '19 at 14:18
That is what I was thinking as well. The loop seems to be the biggest issue here. – Jem Jun 07 '19 at 14:20
What is your this.state.numTimes value? – n3dx Jun 07 '19 at 14:22
Hi n3dx I believe the answer to your questions is this.state.numTimes is a prop holding the value of nothing numTimes: "". But I have it setup to where a user can input a number into a textbox and it goes into that for loop. Hope that makes sense. – Jem Jun 07 '19 at 14:27
Yeah sure,I was able to get the new line using '\n'.I will edited this post. – n3dx Jun 07 '19 at 14:29

score 0 · Answer 3 · answered Jun 07 '19 at 14:17

0

Did you try this?

output += i + ". Hello " + this.state.name + "!"+ {"\n"}

answered Jun 07 '19 at 14:17

Monica Acha

1,076
9
16

Hello, yes I have tried this before posting. I apologize for not including that into my list of tired items. Maybe it would be more beneficial posting more of my code if necessary? – Jem Jun 07 '19 at 14:21

Having issues getting a newline on my code

3 Answers3