CODEWITHSUNDEEP
reactjsreact-nativestate
Salah Miftah
Salah Miftah

Reputation: 146

How to update state of an object in state with another object in state

I have a view-table that shows some data from database for every line. At the end there are two buttons: "Edit" and "Delete".

line with various entries

When you press the "Edit" (Modifica) button a modal will shows up, inside of it theres an input with select attribute that allow you to choose determinate elements picked from the database. In my case, since I pressed the edit button, I set it to fill it with the one contained in the table .

input inside modal

In state I have an array of objects and the object that I want to update (id_tipo) based on what I choose in the input field: So my problem is that I don't know how to update the state of the id_tipo

constructor(props) {
    super(props);
      this.state = {
      id_tipo:'',
      tipo_attivita: '',

     TipiAttivita:[]
     };

Fetching data:

                async componentDidMount(){
              //Im using Promiss.all for multiple calls

         Promise.all([
               await fetch("http://localhost:5000/api/azienda/tipiattivita"), // this is the fetch that interests us
               await fetch("http://localhost:5000/api/azienda/orario"),
               await fetch("http://localhost:5000/api/azienda/aziende"),
               await fetch("http://localhost:5000/api/azienda/urgenza"),
               await fetch("http://localhost:5000/api/azienda/azienda_utente"),
               await fetch("http://localhost:5000/api/azienda/utente")
            ])
            .then(([res1, res2, res3, res4, res5, res6]) => Promise.all([res1.json(), res2.json(), res3.json(), res4.json(), res5.json(), res6.json()]))
            .then(([data1, data2, data3, data4,data5,data6]) => this.setState({

              TipiAttivita: data1, // there's the object in question

                //To avoid confusion I removed these objects from the state
                Orario: data2,
                Azienda: data3,
                Urgenza: data4,
                AziendaUtente: data5,
                Utente: data6

            }));

 if(this.props.item){
            const {id_tipo, tipo_attivita} = this.props.item
            this.setState({ id_tipo , tipo_attivita})
          }
        }

In render() i create this code for mapping elements inside the array:

const tipiattivita = this.state.TipiAttivita.map(item => {

       return (
       <option key={item.id_tipo_attivita} >{item.tipo_attivita}</option>

        )
  })

And then I pass the data to the Input select:

   <Input type="select" name="tipo_attivita" id="tipo_attivita" onChange={this.onChange}  value={this.state.tipo_attivita=== null ? '' : this.state.tipo_attivita}  >
          {tipiattivita}
    </Input>

When I press the object in the select I choose an element from the same table as the element in the previous view-table, so in the beginning when I press the edit button and the modal shows up id_tipe(id state before opening modal form) is different from id_tipo_attivita(id of the elements in array). what I would like to do is that if the data selected is different from his previous state (id_tipo !== id_tipo_attivita), to set them both same.

When I try to do this

<option key={this.state.id_tipo=item.id_tipo_attivita}

this alert shows up

Do not mutate state directly. Use setState() react/no-direct-mutation-state)

Awaiting for reply. Your help would be much appreciated

Upvotes: 3

Views: 207

Answers (1)

Mobeen
Mobeen

Reputation: 985

As for what you are trying to do, I think a better way would be that you pass id to onChange callback and set state value of modal form on that onChange callback function.

e.g :

onChange={ (e, item) => this.onChange(e, item.id_tipo_attivita) }

Ref on why you getting that warning/message for direct state mutation:

You are changing state value in the below line:

<option key={this.state.id_tipo=item.id_tipo_attivita}

This is not allowed/recommended (for multiple reasons). I would suggest you use componentDidUpdate or the callback from the setState method to set the value of state based on other state values (if need be).

Upvotes: 2

Related Questions