how to write correctly - js in html in return statement

Question

I have a return statement in JSX. I need to delete the first element of the array and return the reduced array and then map it. But the app crashes on the line of reducing array.

I checked - this is an array. So I suppose this is about that I write JSX incorrectly. Please, could you help me.

return (
    <div className="popup__toggle">
    {let newArr = event.slice(1)}                                                                                   
    {console.log(newArr)}                                                              
    {newArr.map((item, index) => {                                                                                                                                                                                                       
        return(                                                                                                         
            <div>{item.name}</div>                                                                                                      
        )
    )}
</div>

I need to delete the first index of the array and map it.

Alireza HI · Accepted Answer · 2019-07-17 12:21:17Z

Notice 1:

You are handling JSX as a raw JS problem. You need to do it with functional solutions. So instead of defining variables using let you can slice the variable directly and then use the result.

So your code would be like below:

return (
    <div className="popup__toggle">                                                       
    {event.slice(1).map(item => {
        return(                                                                                                         
            <div>{item.name}</div>                                                                                                      
        )
    })}

</div>
)

Notice 2:

You didn't close your brace correctly. I mean the one in the map item. You haven't closed it. instead of that I recommend to return your result without brace and return. Like below:

{event.slice(1).map(item => item)}

This is as an abbreviation for that. So your could could be like below:

{event.slice(1).map(item => {
    return <div>{item.name}</div>
})}

Or

{event.slice(1).map(item => <div>{item.name}</div>)}

Clarity · Accepted Answer · 2019-07-17 12:04:01Z

0

Try this:

return (
      <div className="popup__toggle">
        {event.slice(1).map(item => <div key={item.name}>{item.name}</div>)}                                                                                                                                                                                   
      </div>
     )

answered Jul 17, 2019 at 12:04

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Comments

Sultan H. · Accepted Answer · 2019-07-17 12:16:54Z

0

You almost got it right, but, instead of having your newArr var inside JSX, which exactly what you mentioned, do it outside your return function:

So I suppose this is about that I write JSX incorrectly.

Do this

render(){
  let newArr = event ? event.slice(1) : []; //the new place for the new array. also added a check [event &&] to check if the array is there or not. if its not there it will return an empty array to prevent rendering issues due to newArr.map().
  return (
    <div className="popup__toggle">
      {
        newArr.map((item, index) => <div key={`item.name-#${index + 1}`}>{item.name}</div>)
      }
    </div>
  )
}

answered Jul 17, 2019 at 12:16

Sultan H.

2,9383 gold badges14 silver badges23 bronze badges

Collectives™ on Stack Overflow

how to write correctly - js in html in return statement

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related