Calling a variable from fetch into React render function

Question

I'm mapping over an array of vitamins from json, and I want to return the name of each Vitamin in the array in a dropdown menu when clicked on.

I thought I could declare a const variable in the fetch function, and use that in my JSX.

  componentDidMount() {
    fetch('/users')
    .then(res => res.json())
    .then(micros => micros.vitamins.map((micro) => {
      const microVit = micro;
    }))
  }

  render() {
    return (
     <form>
        <label className="nutrient-label">
          Vitamins
        </label>
       <select value={this.props.value} onChange={this.handleChange}>
         <option value="" selected>--Vitamins--</option>
         {microVit.map((vitamin, index) =>
           <option value={vitamin.value} key={index}>{vitamin.name}</option>
         )}
       </select>
    </form>
   )
  }

When I console.log(microVit) in the fetch function, I do get the array of Vitamins. It just doesn't carry over to the map function I'm trying to work in the return statement of my render function.

Roy Wang · Accepted Answer · 2018-05-26 00:33:48Z

1

You need to store it in the state and update it via setState to re-render the component with the new data:

class ... {
  state = { microVit: [] }

  componentDidMount() {
    ...
    .then(({ vitamins }) => this.setState({ microVit: vitamins })
  }

  render() {
    ...
      {this.state.microVit.map(...

answered May 26, 2018 at 0:33

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

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

Comments

Turan · Accepted Answer · 2018-05-26 00:36:29Z

1

Your const microVit is encapsulated.

Move the decleration to outside your component did mount method ideally to internal state or a redux store.

answered May 26, 2018 at 0:36

Turan

3022 silver badges9 bronze badges

Collectives™ on Stack Overflow

Calling a variable from fetch into React render function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related