react I want to output the array in multiple tags rather than one tag-CodePudding

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>
)

CodePudding user response：

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>
    )
}

CodePudding user response：

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>

CodePudding user response：

String with newlines `/n`

I 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>

Arrays

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>

CodePudding user response：

simply be .map() its possible to iterate, and code reusability is achieved,

{functionSupplement.map(e=><p>{e}</p>)}

CodePudding user response：

render() {
    return <div>
    {
        functionSupplement.map((mgs) =><p>{mgs}</p>)
    }
    </div>;
}

CodePudding user response：

If you don't need the <div> around like in the other answers, <React.Fragment /> (or <> and </>) comes to your rescue (which renders as DocumentFragment):

render() {
    return <React.Fragment>
        {functionSupplement.map((mgs) =><p>{mgs}</p>)}
    </React.Fragment>;
}

String with newlines /n

Arrays

String with newlines `/n`