Changing parent's state from child, but the props of the child don't update

Question

class IQTestItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      ItemNumber: 1
    }
    this.nextItem = this.nextItem.bind(this)
  }

  nextItem() {
    let nextItem = this.state.ItemNumber + 1
    this.setState({
      itemNumber: nextItem
    })
  }

  render() {
    return (
      <div>
        <img src={'IQTestImages/item ' + this.state.ItemNumber + '/' +this.state.ItemNumber + '.svg'} alt={'item ' + (this.state.ItemNumber)}  />
        <ItemOptions 
          itemNumber={this.state.ItemNumber}
          nextItem={this.nextItem}
        />
      </div>
    )
  }
}

class ItemOptions extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let itemNumber = this.props.itemNumber
    return(
      <div>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.1.svg`} alt={`Option 1`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.2.svg`} alt={`Option 2`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.3.svg`} alt={`Option 3`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.4.svg`} alt={`Option 4`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.5.svg`} alt={`Option 5`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.6.svg`} alt={`Option 6`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.7.svg`} alt={`Option 7`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.8.svg`} alt={`Option 8`} onClick={this.props.nextItem}/>
      </div>
    )
  }
}

My problem is that if I manually change the ItemNumber in IQTestItem's state, my images all change perfectly fine. When I try to change it with the child Component ItemOptions it changes the state of the parent (IQTestItem) but the child never recieves the updated state of the parent through the props. I am doing that with onClick={this.props.nextItem}. Does somebody know what I am doing wrong?

Sorry I am fairly new to react.

Answer 1

You have a typo in a nextItem() . Js is case sensitive so instead of itemNumber: nextItem you should do ItemNumber: nextItem

Offtopic - if you are new to react, you shouldn't start with classes. Classes will be soon deprecated. Atm easiest way to learn react are functional components + hooks https://reactjs.org/docs/hooks-intro.html