We have now put json array data in the functionSupplement variable.
If you print this <p>functionSupplement </p>, you will get something like this.
How can I write code to get it to work the way I want it to?
<p>
"Hi"
"Hi"
</p>
I want to make it like this.
<p>
"Hi"
</p>
<p>
"Hi"
</p>
This is my code.
let functionSupplement = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo.map(array => array.ingredientsInfo?.[0].mFunctionalDisplayText);
console.log(functionSupplement) // (2) ["Hi","Hi]
return (
<div>
<p>{functionSupplement}</p> //<p>"Hi" "Hi"</p>
</div>
)
You can use the .map property like so :
let functionSupplement = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo.map(array => array.ingredientsInfo?.[0].mFunctionalDisplayText);
console.log(functionSupplement) // (2) ["Hi","Hi]
return (
<div>
{functionSupplement.map(item=> <p>{item}</p>)}
</div>
)
}
You'll want to use map on the list.
For more info, see: https://reactjs.org/docs/lists-and-keys.html
Here's a working example based on your code:
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict';
let functionSupplement = ["hi", "hello"];
const paragraphs = functionSupplement.map((item) =>
<p key={item}>{item}</p>
);
ReactDOM.render(paragraphs,document.getElementById('root'));
</script>
</body>
</html>/nI would assume you just want your content to appear on separate lines.
You can use the <pre> tag to render content as it is.
const content = `this is line 1
this is line 2
this is line 3`
class Snippet extends React.Component {
render() {
return (<div><pre>{ content }</pre></div>)
}
}
ReactDOM.render(
<Snippet />,
document.body
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>If you are rendering an array you can also use .map to loop through the array.
const content = ['this is line 1','this is line 2','this is line 3']
class Snippet extends React.Component {
render() {
return (<div>{ content.map( (x,i) => <p key={i}>{x}</p>) }</div>)
}
}
ReactDOM.render(
<Snippet />,
document.body
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>