How to access to state of repeated component in ReactJS

Question

i am new to reactjs. I want to access state of a repeated react component. My code is

{Object.keys(this.state.sharing).map((share)=>{              
                          return(<Sharings />)
                                               })}

above component is repeated 3 times

The Sharing Component contains radio buttons and button. When the radio button is clicked then only button is enabled. Here is my code

<div className="col-xs-12 col-md-4">
                <div className="book-now-card p-b-10" style={{height:height}}>
                    <div className="single-sharing" style={{height: '180px'}}>
                        <h3 className="single-sharing-heading">{props.heading}</h3>
                    </div>
                    <div className="m-t-20">
                        {
                            props.rent.map((rent)=>{
                                return(
                                    <div className="m-10" key={rent}>
                                        <input type="radio" name={'radio'} className="m-l-20 " onClick={(e)=>{this.handleChange(rent,e)}} /> <span className="m-l-20" style={{color:'#009688'}}>₹ {rent}</span>
                                        <p className="m-l-55 f-s-12" style={{color: '#65747a'}}>{props.details}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="m-20">
                        <button className="btn btn-secondary col-6 select-rent" disabled={true} onClick={(e)=>{this.proceed(e)}} id={'Button'+this.props.num}>SELECT</button>
                    </div>
                </div>
            </div>

I want disable button in button in 1st and 3rd sharing component when radio button in 2nd sharing Component is clicked. I tried DOM manipulation with document.getElementById but click function in button stopped working.

You must update the parent component state when clicking the radio. This is the easiest way to update siblings. — Ilya Novojilov, Jan 22 '18 at 11:45
The easiest way to handle it is to keep the state shared between components in the Parent, Read this https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 and https://reactjs.org/docs/lifting-state-up.html — Shubham Khatri, Jan 22 '18 at 12:15

score 0 · Answer 1 · answered Jan 22 '18 at 13:09

Your input component should be controlled component

In your map method you should have something like this:

<input
  type="radio"
  name={'radio'}
  className="m-l-20 "
  value={this.state.radiosValues[index]} {/* get radio value from state */}
  onClick={()=>{ // We don't need event because we work with booleans
    const radiosValues = this.state.radiosValues
    radiosValues[index] = !radiosValues[index] // If true we want false, if false we want true
    this.setState({ radioValues})
 }}
/>

How to access to state of repeated component in ReactJS

1 Answers1