React map over the array object

Question

I'm quite new with react stuff, what I am trying is to generate some dynamic stuff using .map()

This is my component:

import React, { Component } from "react";

class DynamicStuff extends Component {
  state = {
    options: [
      { id: 1, optionOne: "OptionOne" },
      { id: 2, optionTwo: "OptionTwo" },
      { id: 3, optionThree: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];
    
    return (
      <>
      {options.map((option) => {
        return {option}
      })}
        <span>{options.optionOne}</span>
        <span>{options.optionTwo}</span>
        <span>{options.optionThree}</span>
      </>
    );
  }
}

export default DynamicStuff;

What I am doing wrong here and why the map is not generating expected result ?

Normally the objects in array have same keys, but here they are optionOne, optionTwo, optionThree. Are you sure the object is correct? — rzwnahmd
– rzwnahmd, Commented Apr 16, 2020 at 7:46

marc_s · Accepted Answer · 2020-07-09 04:24:06Z

2

Is it ok?

import React, { Component } from "react";
class DynamicStuff extends Component {
  state = {
    options: [
      { id: 1, value: "OptionOne" },
      { id: 2, value: "OptionTwo" },
      { id: 3, value: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];

    return (
      <>
      {options.map((option) => {
        return <span>{option.value}</span>
      })}
      </>
    );
  }
}
export default DynamicStuff;

edited Jul 9, 2020 at 4:24

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 16, 2020 at 7:46

auntR

1701 gold badge3 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

auntR Over a year ago

your span should be wrapped inside the map method, when it loop each time, each span with {option.value} will display

davidgamero Over a year ago

since there is a single parameter and single line to return, you could further streamline the arrow function to options.map(option => (<span>{option.value}</span>))

Dushan Ranasinghage · Accepted Answer · 2020-04-16 07:47:12Z

1

You have made your options object incorrectly. We need to have a same attribute over all the objects in the array.

class App extends React.Component {
  state = {
   options: [
  { id: 1, option: "OptionOne" },
  { id: 2, option: "OptionTwo" },
  { id: 3, option: "OptionThree" }
 ]
  };
  render() {
   const options = [...this.state.options];

  return (
    <>
      {options.map((option, index) => (
        <li key={index}>{option.option}</li>
       ))}
      </>
    );
 }
}

Another thing, If you need to map an array. You don't need to have many spans. Having a one is just enough. The map function will iterate and give you all the things.

answered Apr 16, 2020 at 7:47

Dushan Ranasinghage

5763 silver badges11 bronze badges

Comments

wang · Accepted Answer · 2020-04-16 07:47:25Z

1

The map used here is actually to convert the js object into a react element, but your usage here is still a js object after the map conversion. The react element may be a <p key = {option.id}> {option. optionOne} </p>. If there is a react element after the return in your map, it is correct.

{options.map((option) => {
  return <p key = {option.id}> {option. optionOne} </p>
})}

or

{options.map((option) =>  <p key = {option.id}> {option. optionOne} </p>)}

answered Apr 16, 2020 at 7:47

wang

6128 silver badges19 bronze badges

Comments

SpiritOfDragon · Accepted Answer · 2020-04-16 07:49:15Z

1

YOu need to map and return the HTML element

return ({
  options.map((option) => {
    return `<span key={option.id}>${option. option}</span>`
  })
});

answered Apr 16, 2020 at 7:49

SpiritOfDragon

1,4322 gold badges16 silver badges27 bronze badges

Comments

Sajeeb Ahamed · Accepted Answer · 2020-04-16 07:49:33Z

1

You should do something like

render() {
    const { options } = this.state;

    return (
        <div className="option-wrapper">
            {options.length > 0 && options.map(option => {
                return <span key={option.id}>{option.option}</span>
            })}
        </div>
    );
}

answered Apr 16, 2020 at 7:49

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

React map over the array object

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related