How to setState while adding a key value into each array

Question

I'm trying to set state while adding a key value to the array. I've followed several questions including this one: How to add a new key value to react js state array?

I can't get any of those answers to work with my challenge.

My state is like this:

this.state = { jsonReturnedValue: [] }

when componentDidMount() I make a fetch request and I added new state and a foreach loop (as based on the instructions from the question above)

  componentDidMount() {

    let newState = [...this.state.jsonReturnedValue];
    newState.forEach(function(file) {
      file.selected = "false"
    })

    fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
      .then(response => response.json())
      .then(json => {
      this.setState({ jsonReturnedValue: [...this.state.jsonReturnedValue, ...json.printCategory.products] }, () => console.log(this.state));
      })
      .then(this.setState({jsonReturnedValue: newState}, () => console.log("selected added" + this.state) ));
  }

I was thinking that I would just setState again with the key value pair so I added the .then the third time but it's not working.

the final console log returns this: selected added[object Object] Digging more into it I see the object is empty.

EDIT: My goal is to set the state with the api call but also add key value of "selected: false" to each array.

the console log will look like that no matter what because you're trying to concatenate a string and an object. so if you change the log to console.log('selected added', this.state) does it still come back incorrect? — Joey
– Joey, Commented Oct 24, 2018 at 22:15
Not much of this makes sense. You just want to set the state when the fetch call completes? — Jared Smith
– Jared Smith, Commented Oct 24, 2018 at 22:19
My goal is to add the api call to state but also add the key / value of "selected: false" to each array @Jared Smith — FabricioG
– FabricioG, Commented Oct 24, 2018 at 22:21
.then(this.setState your using then incorrectly, then expects a function callback. eg.. .then(() => this.setState(.... — Keith
– Keith, Commented Oct 24, 2018 at 22:26
you should describe in your question what kind of data structure gets returned from the api and what should state look like after it's updated — Oluwafemi Sule
– Oluwafemi Sule, Commented Oct 24, 2018 at 22:29

Matthew Herbst · Accepted Answer · 2018-10-25 17:20:31Z

componentDidMount only runs once, the first time the component is mounted, which is before your data call. After you fetch your data and call setState, the update lifecycle methods are run.

Assuming you are on a new version of React, you'll want to intercept your state change in getDerivedStateFromProps:

getDerivedStateFromProps(props, state) {
  // `state` will be the new state that you just set in `setState`
  // The value returned below will be the new state that the `render`
  // method sees, and creating the new state here will not cause a re-render
  return state.jsonReturnedValue.map((file) => {
    file.selected = "false";
    return file;
  });
}

Now, Ideally you don't actually want to do that there, but instead do it once you fetch your data:

fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
      .then(response => response.json())
      .then(json => {
        // NOTE: it's unclear from your post exactly what the data structure is
        // Is it product.file, or is `product` also `file`?
        const products = json.printCategory.products.map((product) => {
          product.file = "selected";
          return product;
        });

        this.setState(
          {
            jsonReturnedValue: [...this.state.jsonReturnedValue, ...products],
          },
          () => console.log(this.state)
        );
      });

Joey · Accepted Answer · 2018-10-24 22:28:46Z

0

should probably be something like this

function addSelectedFalse(array) {
    return array.map(item => ({
        ...item,
        selected: false
    })

fetch('endpoint')
    .then(response => response.json())
    .then(json => this.setState({ jsonReturnedValue: [...addSelectedFalse(this.state.jsonReturnedValue), ...addSelectedFalse(json.printCategory.products] }))

answered Oct 24, 2018 at 22:28

Joey

1722 silver badges4 bronze badges

Comments

wdm · Accepted Answer · 2018-10-24 22:35:35Z

0

From my understanding you want to fetch a products array and add selected: false to each product before setting state:

constructor(props) {
    super(props);
    this.state = {
        products: []
    }
}
componentDidMount() {
    fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
    .then(response => response.json())
    .then(json => {
        const { products } = json.printCategory;
        for (let i = 0; i < products.length; i++) {
            products[i].selected = false;
        }
        this.setState({products});
    });
}

answered Oct 24, 2018 at 22:35

wdm

7,1891 gold badge31 silver badges31 bronze badges

Comments

ene_salinas · Accepted Answer · 2018-10-25 01:21:29Z

Here an idea working:

https://codepen.io/ene_salinas/pen/GYwBaj?editors=0010

  let { Table } = ReactBootstrap;

  class Example extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.state = {
          products: []
      }
    }

    componentDidMount() {
      console.log('componentDidMount..')
      fetch('https://api.github.com/users/xiaotian/repos')
        .then(response => response.json())
        .then(output => {
          let products = []
          for (let i = 0; i < output.length; i++) {
              products.push({selected:false,name:output[i].name})
          }

          this.setState({products},() => console.log(this.state))

      })

    }

    render() {

          return(<Table striped bordered condensed hover>
            <thead>
              <tr>
                <th>Selected</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {this.state.products.map((item, i) => {
                return (
                    <tr><td><input type="checkbox" checked={item.selected}/></td><td>{item.name}</td></tr>
                ) 
              })}
            </tbody>
          </Table>)
    }
  }

  ReactDOM.render(
    <Example />, 
    document.getElementById('app')
  );

Hope to help you!

Collectives™ on Stack Overflow

How to setState while adding a key value into each array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related