Ahora hemos puesto los datos de la json array en la variable functionSupplement. Si imprime este <p>functionSupplement </p> , obtendrá algo como esto.
¿Cómo puedo escribir código para que funcione como yo quiero?
<p> "Hi" "Hi" </p>Quiero hacerlo así.
<p> "Hi" </p> <p> "Hi" </p>Este es mi código.
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> )Puede usar la propiedad .map así:
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> ) }Querrás usar el map en la lista.
Para obtener más información, consulte: https://reactjs.org/docs/lists-and-keys.html
Aquí hay un ejemplo de trabajo basado en su código:
<!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>/nSupongo que solo desea que su contenido aparezca en líneas separadas.
Puede usar la etiqueta <pre> para representar el contenido tal cual.
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> Si está representando una matriz, también puede usar .map para recorrer la matriz.
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>