CODEWITHSUNDEEP
reactjs
esoteric elf
esoteric elf

Reputation: 55

React mapping inside div

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.

Upvotes: 0

Views: 241

Answers (4)

Rishabh Singh
Rishabh Singh

Reputation: 1

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: collapse }}>
        {content.map((item)=>
            <InlineMath>{item}</InlineMath>)}
    </div>

)} ;

Upvotes: 0

Trung Ngoc
Trung Ngoc

Reputation: 29

Edit your code like below:

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

Upvotes: 0

darshan_r
darshan_r

Reputation: 107

Try this

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


return (

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

    </div>

)} ;

Upvotes: 1

Shikhar Awasthi
Shikhar Awasthi

Reputation: 1232

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>

)} ;

Upvotes: 1

Related Questions