Split array value using reactjs [duplicate]

Question

I have an array like this:

["Daniel", "Adam", "Charlie", "Brad"]

I want to put that array into in react. So i expected the results like this

<select>
    <option> Daniel </option>
    <option> Adam </option>
    <option> Charlie </option>
    <option> Brad </option>
</select>

How I can solve it? Any answer would be appreciated.

Welcome to Stack Overflow! Please take the tour and read through the help center, in particular How do I ask a good question? Do your research, search for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a minimal reproducible example of your attempt and say specifically where you're stuck. People will be glad to help. Good luck! — T.J. Crowder
– T.J. Crowder, Commented Jan 31, 2018 at 6:27

Ahsan Ali · Accepted Answer · 2018-01-31 06:31:42Z

2

It's simple. Just map over your array

class App extends React.Component {

      constructor() {
        super();
        this.state = {
          arr: ["Daniel", "Adam", "Charlie", "Brad"]
        }
      }


      render() {
      let {arr} = this.state;
        return (
          <select>
          {arr.map((x, i) => <option key={i}>{x}</option>)}
          </select>
        )
      }

    }

    ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered Jan 31, 2018 at 6:31

Ahsan Ali

5,1352 gold badges19 silver badges28 bronze badges

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

Comments

Ali Faris · Accepted Answer · 2018-01-31 06:29:50Z

1

you can use map on the array

let a = ["Daniel", "Adam", "Charlie", "Brad"];

<select>
    {
        a.map((item , index) => <option key={index}> {item} </option>)
    }
</select>

edited Jan 31, 2018 at 6:29

answered Jan 31, 2018 at 6:27

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

4 Comments

HimanshuArora9419 Over a year ago

Don't forget to have unique key for each option element. Otherwise React will give warning.

Ali Faris Over a year ago

@HimanshuArora9419 yes of course

Rama Widi Over a year ago

Thank you so much, that is very helpful for beginner like me. :)

Ali Faris Over a year ago

you're welcome :)

Collectives™ on Stack Overflow

Split array value using reactjs [duplicate]

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related