CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6components
RulerNature
RulerNature

Reputation: 753

React map over the array object

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 ?

Upvotes: 0

Views: 70

Answers (5)

auntR
auntR

Reputation: 170

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;

Upvotes: 2

Sajeeb Ahamed
Sajeeb Ahamed

Reputation: 6390

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

Upvotes: 1

SpiritOfDragon
SpiritOfDragon

Reputation: 1432

YOu need to map and return the HTML element

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

Upvotes: 1

wang
wang

Reputation: 612

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

Upvotes: 1

Dushan Ranasinghage
Dushan Ranasinghage

Reputation: 576

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.

Upvotes: 1

Related Questions