How do I add a selection from a drop down list to built up list in React.js?

Question

From a previous question, I know how to build a list of last name and first name:

• Stan Lee
• Peter Parker
• Mary Jane
• Bruce Banner

I have a drop down list but I don't know how to add the selection from the drop down list to the list of people I am building up:

• Stan Lee male
• Peter Parker male
• Mary jane female
• Bruce Banner male

I've looked at the react.js documentation on the facebook page but the examples are very basic and sparse.

 import React from 'react'; import './index.css'; import { render } from 'react-dom'; const PostButton = (props) => { const style = { width: 24, height: 24 } return ( <button style={style} onClick={() => props.handleClick()}>{props.label}</button> ); }; const PostText = (props) => { const style = { border: "1px solid black", width: 200 } return ( <div style={style}>{props.text}</div> ); }; const SelectActivityDropDownList = (props) => { return ( <select> <option selected value="Male">Male</option> <option value="Female">Female</option> <option value="NoDisclosure">Prefer not to disclose</option> </select> ); }; const Post = (props) => { const style = { display: "flex" } return ( <div style={style}> <PostButton label="x" handleClick={props.removeItem} /> <PostText text={props.firstName} width="200" /> <PostText text={props.lastName} width="200" /> </div> ); }; const PostList = (props) => { console.log(props.postList); return ( <ol> { props.postList.map((item, index) => <Post key={index} firstName={item.firstName} lastName={item.lastName} removeItem={() => props.removeItem(index)} /> ) } </ol> ); }; class App extends React.Component { constructor(props) { super(props); this.state = { firstname: "", lastname: "", items: [] }; } handleChange(event) { if (event.target.name === "firstname") { this.setState({ firstname: event.target.value }); } else if (event.target.name === "lastname") { this.setState({ lastname: event.target.value }); } } addItem() { this.setState({ items: [ ...this.state.items, { firstName: this.state.firstname, lastName: this.state.lastname} ], firstname: "", lastname: "" }); } removeItem(index) { const items = this.state.items.filter((e, idx) => idx !== index); this.setState({ items }); } render() { return ( <div> <div>First Name</div> <input name="firstname" value={this.state.firstname} onChange={this.handleChange.bind(this)} /> <div>Last Name</div> <input name="lastname" value={this.state.lastname} onChange={this.handleChange.bind(this)} /> <div> <SelectActivityDropDownList/> </div> <div> <button onClick={() => this.addItem()}>Submit</button> </div> <div> <PostList postList={this.state.items} removeItem={this.removeItem.bind(this)} /> </div> </div> ) } } render(<App />, document.getElementById('root')); 

Answer 1

You could attach the selected option to the created person by holding it in the state, like the firstName and the lastName, try out this code:

import React from 'react';
import './index.css';
import { render } from 'react-dom';

const PostButton = ({ label, index, handleClick }) => {
  const style = {
    width: 24,
    height: 24
  }

  return (
    <button
      style={style}
      onClick={() => handleClick(index)}
    >
      {label}
    </button>
  );
};

const PostText = ({ text }) => {
  const style = {
    border: "1px solid black",
    width: 200
  }

  return (
    <div style={style}>{text}</div>
  );
};

const Post = (props) => {
  const {
    item: { firstName, lastName, gender },
    removeItem,
    index,
  } = props;

  const style = {
    display: "flex"
  }

  return (
    <div style={style}>
      <PostButton
        label="x"
        handleClick={removeItem}
        index={index}
      />
      <PostText text={firstName} width="200" />
      <PostText text={lastName} width="200" />
      <PostText text={gender} width="200" />
    </div>
  );
};

const PostList = ({ removeItem, postList }) => {
  console.log(postList);

  return (
    <ol>
      {
        postList.map((item, index) => (
          <Post
            key={index}
            item={item}
            removeItem={removeItem}
            index={index}
          />
          )
        )
      }
    </ol>
  );
};

const SelectActivityDropDownList = ({ selectedOption, handleChange }) => (
  <select name="gender" value={selectedOption} onChange={handleChange}>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="NoDisclosure">Prefer not to disclose</option>
  </select>
)

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: '',
      gender: 'Male',
      items: []
    };
  }

  handleChange = event => this.setState({ [event.target.name]: event.target.value });

  addItem(newItem) {
    this.setState(Object.assign(
      this.state,
      {
        items: [...this.state.items, newItem],
        firstName: '',
        lastName: '',
        gender: 'Male',
      },
    ));
  }

  removeItem = index => {
    const items = this.state.items.filter((e, idx) => idx !== index);
    this.setState(Object.assign(
      this.state,
      { items }
    ));
  }

  render() {
    const { firstName, lastName, gender } = this.state;

    return (
      <div>
        <div>First Name</div>
        <input
          name="firstName"
          value={firstName}
          onChange={this.handleChange}
        />
        <div>Last Name</div>
        <input
          name="lastName"
          value={lastName}
          onChange={this.handleChange}
        />
        <div>
          <SelectActivityDropDownList
            selectedOption={gender}
            handleChange={this.handleChange}
          />
        </div>
        <div>
          <button
            disabled={!firstName || !lastName}
            onClick={() => this.addItem({ firstName, lastName, gender })}
          >
            Submit
          </button>
        </div>
        <div>
          <PostList
            postList={this.state.items}
            removeItem={this.removeItem}
          />
        </div>
      </div>
    )
  }
}

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