Don't change the state in my component – React

March 31, 2022

I’m trying to change the state the a child component but don’t change, this is the parent component:

export default class History extends Component {
   constructor(props) {
      super(props);
      this.state = {
         histories : JSON.parse(JSON.stringify(histories)),
         counter: 1,
         id: ''
      }
   }

   increaseCounter = () => {
      this.setState({counter: this.state.counter+1})
   }

   showIdHistory = (id) => {
      this.setState(() => {return {id:id}})
   }

   render() {
      return (
         <div className="history">
            <div>
               <h3 className='titleHistory'>{searchHistoryById(this.state.id,this.state.counter)}</h3>
            </div>
            <div className='options'>
               <div className='option'>
                  <BottonOptionA  option='A' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>

                  <h2>{searchOptionById('a',this.state.counter+this.state.id)}</h2>
               </div>

               <div className='option'>
                  <BottonOptionB  option='B' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>

                  <h2>{searchOptionById('b',this.state.counter+this.state.id)}</h2>
               </div>
            </div>

            <div className='sectionStatics'>
               <SelectionBefore optionAnterior={this.state.id}/>
               <reacordOfOptions option={this.state.id}/>
            </div>
         </div>
      );
   }
}

i want that the parent component pass the state to the component called SelectionBefore but when the parent child changes the state, the props of SelectionBefore still is the same

this is the component child:

import React,{Component} from 'react'

export default class SelectionBefore extends Component {
    constructor(props) {
        super(props)
        this.state = {
            optionBefore : props.optionBefore,
        }
    }

    render() {
        return (
            <div >
                <p> Seleccion anterior: {this.state.optionBefore}</p>
            </div>
        )
    }
}

>Solution :

Try following changes :

Child component

import React,{Component} from 'react'

export default class SelectionBefore extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div >
                <p> Seleccion anterior: {this.props.optionAnterior}</p>
            </div>
        )
    }
}

I have directly used the props which is passed by parent to the child .
This means that , whenever state of parent changes , your child will rerender and the changes will be shown .