React, looping through object, displaying list, and grabbing that object when selected

Question

Edit: I have made it work by getting the target.value from the list, passing that to firstComp.js . Where the onChange method is below, but is this the best practice?

 onchange = (e) =>{
    let name= e.target.value
    let currentName= this.state.foodData.map((item)=>{
    if(name==item.name){
      console.log(item)
    }
})
}

Im doing stephen griders course on react, and trying to implement what he teaches on a personal project, but I cant wrap my head around it.

I have a list, that is looping through an array of objects. When I pick something from that list, I want it to update the state with that object.

The Layout..

DropDownList.js = return a drop down list with all the ingredient names in foodData

DropDownItem = loops through the foodData, returning an option value for each one.

foodData .js = db that looks something like this..

let foodData=[
  {"name":"MCT Oil", "brand":"Keppi Keto", "servings":1}
  {"name":"Chunky Peanut Butter", "brand":"Skippy"}
]

firstComp.js

import React, { Component} from 'react'
import ReactDOM from 'react-dom'
import foodData from './food/foodData.js'
import DropDownList from './DropDownList.js'

class Layout extends Component {
  constructor () {
    super()
    this.state = {
      foodData:foodData,
      selectedFood:''
    }
    this.onchange =this.onchange.bind(this)
  }
  onchange = (e) =>{
  console.log(e.target.value)

  }
  render () {
    return (<div className='home'>
        <DropDownList foodData={this.state.foodData} onchange={this.onchange}  />
      </div>)
  }
}
const app = document.getElementById('app')
ReactDOM.render(<Layout />, app)

DropDownList.js

import React from 'react'
import DropDownItem from './DropDownItem.js'

const DropDownList = (props) =>{
****let textInput = React.createRef();**** //REFS
const ingredientItems = props.foodData.map((ingredient, i)=>{
  return<DropDownItem key={i} ingredient={ingredient} **ref={textInput}**//REFS />
})
    return(
        <select value={ingredientItems.name} onChange ={ (e) => props.onchange(e)} >
          {ingredientItems}
        </select>
    )
}
export default DropDownList;

DropDownItem.js

import React from 'react'

const DropDownItem = ({ingredient}) =>{
  const itemName = ingredient.name
    return(<option value={itemName}>{itemName}</option> )
  }
export default DropDownItem;

Answer 1

You don't need to use refs here. You can use some kind of handleChange function in your DropdownList component and send back the value to parent component.

const DropDownList = (props) => {
  const handleChange = e => props.onchange( e.target.value );
  const ingredientItems = props.foodData.map((ingredient) =>
    <DropDownItem key={ingredient.name} ingredient={ingredient} /> );

  return (
    <select onChange={handleChange}>
      {ingredientItems}
    </select>
  )
}

and in the parent component:

class Layout extends Component {
  state = {
    foodData,
    selectedFood: foodData[0]
  };

  onchange = name =>
      this.setState({
          selectedFood: foodData.filter(food => food.name === name)[0]
      });

  render() {
    return (<div className='home'>
      <DropDownList foodData={this.state.foodData} onchange={this.onchange} />
    </div>)
  }
}

or without struggling with values and filter, we can use e.target.options.selectedIndex as OP finds out him/herself :) This is a cleaner way and works as this (only related parts) :

DropdownList.js

const handleChange = e => props.onchange( e.target.options.selectedIndex);

Layout.js

onchange = index => this.setState({ selectedFood: foodData[index] });