react render variable undefined

Question

for some reason that i dont understand, i cant seem to fetch a state value in my renderer, at first i thought it was a scoping issue, but even after changing to var, my variable is undefined.

constructor(props) {
        super(props);
        this.state = {
            stuff: {}
        };

 componentDidMount(){
                
            this.getatuff.then( (result) =>{
                    this.setState({
                        stuff: result.items[0]
                });
            });
        console.log('REACT Coveo component DOM loaded');

    }
    render() {
        var ReactMarkdown = require('react-markdown');
        var project = this.state.stuff;
        
        debugger;
        if(!Object.entries(project).length === 0){
            var asd = project.body[1].value; <---UNDEFINED
            return (
                <div className="block"> 
                    <ReactMarkdown source={asd} />
                    </div>               
            );
        }

why is my Object array value undefined in the renderer?

Note: both const variables in the screenshot were changed to var, and the behavior persists.

i guess its not project it should be staff .this.state.project; to = this.state.staff;.i can see only staff is initalized in state and you have called project in renderer method — Vision Coderz, Mar 12 '19 at 03:23

score 0 · Accepted Answer · answered Mar 12 '19 at 03:19

0

You'd need to define state inside your class, or inside your constructor():

constructor(props) {
  super(props);

  this.state = {
    project: // something
  }
}

componentDidMount() { 
  // etc.

answered Mar 12 '19 at 03:19

Kevin Wang

644
1
8
20

that is already the case - i just didnt include it in the snippet above, and im setting the state accordingly on componentdidmount – glls Mar 12 '19 at 03:20
Ok I see, Additionally, `componentDidMount` is called AFTER `render`. So if you're trying to get some state in `render` but it doesn't get set until `componentDidMount`, that may be giving you some issues. – Kevin Wang Mar 12 '19 at 03:21
yup - i have some validation, initially, my state is an empty object, however, when the state is updated, it rerenders and this is where it fails =( – glls Mar 12 '19 at 03:22
you could give `componentWillMount()` a shot, instead of `componentDidMount()`, as that is called before `render()`... Not sure if this it good practice though EDIT: `componentWillMount()` is considered 'legacy' and discouraged – Kevin Wang Mar 12 '19 at 03:27

score 0 · Answer 2 · answered Mar 12 '19 at 03:46

It's not clear on your example what you're trying to achieve, but it could be one of these reasons:

on your componentDidUpdate you have a typo in this.getatuff (I assume you're trying to say getStuff
project seem to be defined on your renderer, your screenshot shows that it has a key id:5 and some others, but it might not have a key body or body might not be an array, or the array might contain only 1 value [0] instead of two values [0] and [1]. I suggest you to debug the structure of project to get the right value

there is no typo in the actual code - thanks though and yes body is returned as an array, as you can see from the screenshot, it has 2 objects in it. — glls, Mar 12 '19 at 09:58

score 0 · Answer 3 · answered Mar 12 '19 at 04:04

0

You got syntax error here: if(!Object.entries(project).length === 0) it should be if (!(Object.entries(project).length === 0))

render() {
    var ReactMarkdown = require('react-markdown');
    var project = this.state.stuff;

    debugger;
    if (!(Object.entries(project).length === 0)) {
        var asd = project.body[1].value; <---UNDEFINED
        return (
            <div className="block"> 
                <ReactMarkdown source={asd} />
                </div>               
        );
    }

answered Mar 12 '19 at 04:04

Hai Pham

2,188
11
20

not sure why you are suggesting the syntax being incorrect since my expression evaluates correctly – glls Mar 12 '19 at 10:00
`!Object.entries(project).length === 0` always return `false`, because `!number` is always return a boolean value. It means you are comparing a boolean value with number 0. For example if `Object.entries(project).length` is 2 your expression will be `if (!2 === 0)` and it should be `false`. It must be the same with `Object.entries(project).length` is 0. – Hai Pham Mar 12 '19 at 10:11

react render variable undefined

3 Answers3