cannot access the data inside an array

Question

I'm having trouble accessing data inside my state which I fetch from my database, this is my state:

state = {
    inputDataArr: [],
    inputDataArrTest: [
      {
        formID: 'test',
        inputArr: [1, 2, 3],
        labelArr: [4, 5, 6]
      }
    ]
  };

this is the collection I'm importing from the database:

{
    "_id": {
        "$oid": "5ba96b8ebffd923734090df4"
    },
    "inputArr": [
        "value1",
        "value2",
        "value3"
    ],
    "labelArr": [
        "label1",
        "label2",
        "label3"
    ],
    "formID": "5ba96b83bffd923734090df0",
    "__v": 0
}

which is an object with 2 arrays in it, this is how I fetch it :

componentWillMount() {
    fetch('/api/datas')
      .then(data => data.json())
      .then(datas => {
        const filterdDatas = datas.filter(
          data => data.formID == this.props.match.params.id
        );
        this.setState(currentState => ({
          inputDataArr: [...currentState.inputDataArr, ...filterdDatas]
        }));
      });
  }

now when I console log inputDataArr and inputDataArrTest I get an array with an object inside, exactly the same, but when I console log InputDataArrTest[0] which is what you can see in my state I can see the arrays and the formID, but when I console log inputDataArr[0] I get undefined, really frustrating, anybody knows why?

Where are you doing the console.log? In the render method? There will always be a first render without the async data — Sagiv b.g
– Sagiv b.g, Commented Sep 25, 2018 at 17:30

Itamar · Accepted Answer · 2018-09-26 14:07:19Z

1

Mapping and doing data manipulation inside the render is never a good idea and isn't easy to debug.

My suggestion is to initialize the state to an empty array, and call a method to return the mapped data.

constructor(props) {
    super(props);
    this.state = {
        inputDataArr: []
    };
}

render() {
    const data = this.state.inputDataArr.map(...)
    return <div>{data}</div>
}

This way state is initiated before first render and data will return an empty array. After componentDidMount the state will update and will re-render with the new data.

As a side note, i would do the mapping in a third then and set the state to the result itself.

Happy Coding.

edited Sep 26, 2018 at 14:07

answered Sep 26, 2018 at 6:30

Itamar

1,6341 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagiv b.g · Accepted Answer · 2018-09-25 17:38:24Z

1

I'm not sure where are you running the console.log but setState has a callback method that you can run after the actual data has been updated:

this.setState(currentState => ({
  inputDataArr: [...currentState.inputDataArr, ...filterdDatas]
}), () => {
    // this is the callback for setState, you can access the updated data
  console.log(inputDataArr);
});

Note If you run the console.log in render keep in mind that the first render call will always run before the async data has been fetched.

Note #2 Do not use componentWillMount at all and especially not for fetching data.
Use componentDidMount instead.

answered Sep 25, 2018 at 17:38

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

3 Comments

Alexander Over a year ago

thank you for your comment, I copied your code and changed to DidMount and still I get inputDataArr is undefined

Sagiv b.g Over a year ago

inputDataArr is undefined or inputDataArr[0] is undefined?

Alexander Over a year ago

yes I posted a solution that worked for me thanks to another stack overflow post, thank you for your help!

mcssym · Accepted Answer · 2018-09-25 12:43:39Z

0

Have you test filteredDatas before using ...filteredDatas ? Maybe it is not an Array and result to other thing or an empty Array.
Are you sure this.props.match.params.id is defined and equal to the formID property?
If it exists only one object with unique formID why don’t you use Array#find instead of Array.filter and then update your state with

this.setState(prevState => ({ dataArr: filteredDatas ? prevState.dataArr.concat([filteredDatas]) : prevState.dataArr // Here with Array#find, filteredDatas is null or a object not an Array });

answered Sep 25, 2018 at 12:43

mcssym

9445 silver badges8 bronze badges

Comments

Alexander · Accepted Answer · 2018-09-25 18:35:18Z

0

 renderLabels() {
    const { inputDataArr } = this.state;
    return (
      !!inputDataArr.length &&
      inputDataArr[0].labelArr.map((label, index) => (
        <th key={index}>{label}</th>
      ))
    );
  }

conditional rendering solved my problem

answered Sep 25, 2018 at 18:35

Alexander

1,3985 gold badges22 silver badges44 bronze badges

2 Comments

Itamar Over a year ago

also, debugging it will be hell

Sagiv b.g Over a year ago

.length will never be -n so its either 0 or above. hence there's no reason to coerces to a Boolean. inputDataArr.length && ... should be enough. By the way, your question lacks a lot of important details (such as your render method)

Collectives™ on Stack Overflow

cannot access the data inside an array

4 Answers 4

Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related