CODEWITHSUNDEEP
javascriptreactjs
randomGuy95
randomGuy95

Reputation: 3

state.map(state, i) gives undefined

Hello I am trying to render out options based on an array that I have in my state using map but I get undefined when using it in the return

Here is the array

this.state = {   countries: ["Australia","Brazil","China","Sweden"]}

I try to use it as such

this.state.countries.map((country, i) =>
    <option value={this.state.countries[i]}>{this.state.countries[i]}</option>)

but I get i is undefined. I also try to use country only but always get undefined. But if i in my render do like this

this.state.countries.map((country, i) => console.log(country + " " + i));

I get it perfect both the country and the i is correct. Why cant i use the values in the return?

Here is the whole component

    class BoxForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      weight: "",
      color: "",
      country: "",
      countries: ["Australia","Brazil","China","Sweden"]
    }
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleWeightChange = this.handleWeightChange.bind(this);

  }
   handleNameChange(e) {
    this.setState({ name: e.target.value });
  }
  handleWeightChange(e) {
    this.setState({ weight: e.target.value });
  }

  render() {
    this.state.countries.map((country, i) => console.log(country + " " + i));
    return (
      <div className="formGroup">
       <form>
        <FormGroup>
        <h4 className="nameHeader">Name</h4>
          <FormControl
            className="textfield"
            type="text"
            value={this.state.name}
            placeholder="Enter text"
            onChange={this.handleNameChange}
          />
           <h4 className="weightHeader">Weight</h4>
          <FormControl
            className="textfield"
            type="number"
            value={this.state.weight}
            placeholder="Enter text"
            onChange={this.handleWeightChange}
          />
           <h4 className="colorHeader">Box Color</h4>
          <FormControl
            className="textfield"
            type="text"
            value={this.state.color}
            placeholder="Enter text"
          />
           <h4 className="destinationHeader">Destination Country</h4>
          <FormControl
            componentClass="select"
            className="textfield"
            type="dropdown"
            value={this.state.country}
            placeholder="Enter text"
          >
         this.state.countries.map((country, i) =>
  <option value={this.state.countries[i]}>{this.state.countries[i]}</option>)
        </FormControl>
        </FormGroup>
      </form>
      </div>
    );
  }
}

export default BoxForm;

Upvotes: 0

Views: 88

Answers (2)

Johnson Samuel
Johnson Samuel

Reputation: 2076

Please check the working select option component created :).

https://codesandbox.io/s/xjpw5wq65w

import React, { Component } from "react";

class SelectOptionComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      countries: ["Australia", "Brazil", "China", "Sweden"]
    };
  }

  handleChange = e => {
    const { value } = e.target;
    this.setState({
      value: value
    });

    console.log("Selected Item", value);
  };

  renderData() {
    return this.state.countries.map((item, index) => {
      return (
        <option value={item} key={index}>
          {item}
        </option>
      );
    });
  }

  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        {this.renderData()}
      </select>
    );
  }
}

export default SelectOptionComponent;

Upvotes: 0

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

You need to wrap your returned from map array with {}

<FormControl
  componentClass="select"
  className="textfield"
  type="dropdown"
  value={this.state.country}
  placeholder="Enter text"
>
  {this.state.countries.map((country, i) => (
    <option value={country}>{country}</option>
  ))}
</FormControl>;

Upvotes: 1

Related Questions