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 in the process of designing an application where users can input their name and specify how many times they want it to be displayed.
In my attempts to customize the output, I have experimented with styles and adding line breaks 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>
}
Within my loop, odd numbers will not display an exclamation mark but even numbers will, resulting in a sequence like:
1. Hello John
2. Hello John!
and so forth...
Despite no occurrence errors, the current output appears as:
- Hello John 2. Hello John!