React mapping inside div-CodePudding

const ExampleBlock = ({ question, content }) => {


return (

    <div style={{ display: collaspe }}>
        content.map((item)=>{
            <InlineMath>{item}</InlineMath>
        };)

    </div>

)} ;

The problem I am encountering is I try to map an array passed as props inside a div. But vs code prompted an error underlining the arrow of my arrow function. I am inexperienced and I don't understand.

Please kindly point out what I did wrong. Thanks.

CodePudding user response：

You will have to return explicitly from map function when using curly brackets else use parentheses.

const ExampleBlock = ({ question, content }) => {


return (

    <div style={{ display: collaspe }}>
        content.map((item)=>{
            return <InlineMath>{item}</InlineMath>
        })
        you can also do this:
        content.map((item)=>(
            <InlineMath>{item}</InlineMath>
        ))
    </div>

)} ;

CodePudding user response：

Try this

const ExampleBlock = ({ question, content }) => {


return (

    <div style={{ display: collaspe }}>
        {content.map((item)=>(
            <InlineMath>{item}</InlineMath>
        ))}

    </div>

)} ;

CodePudding user response：

Edit your code like below:

const ExampleBlock = ({ question, content }) => {
  return (
    <div style={{ display: collaspe }}>
      {content.map((item) => (
        <InlineMath>{item}</InlineMath>
      ))}
    </div>
  );
};

CodePudding user response：

You need to wrap JS code inside parenthesis if you are writing JS inside an HTML tag

Following is the solution:

const ExampleBlock = ({ question, content }) => {


return (

    <div style={{ display: collaspe }}>
        {content.map((item)=>
            <InlineMath>{item}</InlineMath>)}
    </div>

)} ;