Is there a way to use a variable as part of a value when setting state from props in ReactJS?

manpreet Best Answer 2 years ago

I am very new to React. I am trying to make a reusable Checkbox component. These checkboxes are to send info to an API. I have a GET command on App.JS, to set state.

Here is a simplified version of my API

{
 "devices":[
   {
    "id":1,
    "valveA": true,
    "valveB": false,
    "valveC": true,
   },
   {
    "id":2,
    "valveA": false,
    "valveB": true,
    "valveC": false,
   }

 ]
}

I pass the props to the children like so:

render() {
    const {devices} = this.state;
    return (       
          <div >
            {devices.map(device => (
              <Device device={device} key={device.id} />
            ))}
          div>     
    );

I can make individual components for each checkbox and setting the checked state by setting individual state like so:

 state = { checked: this.props.device.valveA }

But that means I have to make a component for each 'valve' in my API. Ideally I would like to have one Checkbox component that I can reuse for all my "valves".

I've made a semi-working component by specifying the name of the valve as a prop:

<Device device={device} key={device.id} switchFor="valveA" />

And here is my component that successfully passes the change to the API, however I need to dynamically set the last part of the setState

this.props.device.{{{I WANT THIS TO BE DYNAMIC}}}

, otherwise all switches just get the state of valveA:

state = { checked: false };

  componentDidMount(){

    this.setState({ checked: this.props.device.valveStatus })
  }


  handleCheckboxChange = event => {
    const type = this.props.switchFor;

    const checkedStatus = event.target.checked;

    const deviceID = this.props.device.id;

    const obj = {};
    obj[type] = checkedStatus;

    this.setState({ checked: checkedStatus });

    axios
      
                                                

                                                                                                        REPLY
                                                    
                                                
                                                


                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares

                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp