Semantic UI + React issue with undefined data

Question

I'm quite new to React. I have JSON file on server, taking data from it via Node.JS. I want to assign the first part of this data to selectedProfile but it says undefined. When I try to assign it says Cannot read property '*AnyProp*' of undefined lower in JSX part of the code even if I try this.state.selectedProfile.general.firstName etc

import React from 'react';
import ReactDOM from 'react-dom';
import { Image, Search, Grid, Menu } from 'semantic-ui-react';

class ContentFeed extends React.Component {


constructor() {
    super();
    this.state = {
        'items': [],
        'prevName': '',
        'i': 0,
        'selectedProfile': []
    }
    this.getItems = this.getItems.bind(this);

}

componentWillMount() {
    this.getItems();
}


getItems() {

    var jsonData = [];

    const xhr = new XMLHttpRequest();

    xhr.onload = () => {
        if (xhr.status === 200) {
            jsonData = JSON.parse(xhr.responseText);
            this.setState({'items': jsonData});
            this.setState({'prevName': jsonData[0].general.firstName + ' ' + jsonData[0].general.lastName});
            document.getElementById(this.state.prevName).style = 'border: 3px solid black';
            this.setState({'selectedProfile': this.state.items[0]});
            console.log(jsonData);
        } else {
            console.log('Error: No 200 OK response');
        }
    }

    xhr.open('get', 'http://localhost:8000/api/item');
    xhr.send();

}

handleItemClick = (e, { name }) => {
    if (name !== this.state.prevName) {
        document.getElementById(name).style = 'border: 3px solid black';
        document.getElementById(this.state.prevName).style = 'border: 1px solid black';
        this.setState({'prevName': name});
        let i = this.state.items.findIndex(element => {
            return (element.general.firstName + ' ' + element.general.lastName) === name;
        });
        this.setState({'i': i});

        this.setState({'selectedProfile': this.state.items[i]});
    }
}

render() {
    return (
        <Grid>
            <Grid.Column width={4} style={{'height': '700px', 'overflowY': 'scroll'}}>
                <Search />              
                    {this.state.items.map( (item, index) => {
                    return (
                        <Menu key={index} fluid vertical tabular>
                            <Menu.Item 
                                key={item.general.firstName + ' ' + item.general.lastName}
                                name={item.general.firstName + ' ' + item.general.lastName} 
                                id={item.general.firstName + ' ' + item.general.lastName} 
                                onClick={this.handleItemClick}
                                style={{border: '1px solid black'}}
                            >
                            <Image src={item.general.avatar} style={{'width': '50px', 'height': '50px'}}/>
                            <p><br />{item.general.firstName + ' ' + item.general.lastName}</p>
                            <p>{item.job.title}</p>
                            </Menu.Item>
                        </Menu>
                    )
                })}
            </Grid.Column>

            <Grid.Column stretched width={12}>
              <div style={{'margin': 'auto'}} id="content">
                    <h2 style={{'marginTop': '10px', 'overflow': 'auto'}}>{this.state.selectedProfile[0]} {this.state.selectedProfile[1]}</h2>
                    <p></p>
                    <Image style={{'margin': '10px', 'float': 'left'}} src={this.state.selectedProfile[2]}/>
                    <p>Company: {this.state.selectedProfile[3]}</p>
                    <p>Title: {this.state.selectedProfile[4]}</p><br />
                    <p>Email: {this.state.selectedProfile[5]}</p>
                    <p>Phone: {this.state.selectedProfile[6]}</p>
                    <p>Address: {this.state.selectedProfile[7]}</p>
                    <p>City: {this.state.selectedProfile[8]}</p>
                    <p>ZIP: {this.state.selectedProfile[9]}</p>
                    <p>Country: {this.state.selectedProfile[10]}</p>
              </div>
            </Grid.Column>
        </Grid>
    );
}
}

Hardcoded indexes simply looks bad, why not add some data that indicates the label for the element in question. Also note that your selectedProfile will be empty upon first load, getitems should rather be under componentWillMount() lifecycle event, XmlHttpRequest vs fetch or axios or similar libarary, and as far as the question goes, having an output of your jsondata would be helpfull (eg why the first item in the jsondata) — Icepickle
– Icepickle, Commented Jun 8, 2018 at 20:23
@Icepickle jsonData: 21 unit like this: 0 :{general: {…}, job: {…}, contact: {…}, address: {…}} — howHighUR
– howHighUR, Commented Jun 8, 2018 at 20:39

Icepickle · Accepted Answer · 2018-06-09 07:02:16Z

Well you seem to have multiple issues here. In your getItems() xhr callback you are doing the following

jsonData = JSON.parse(xhr.responseText);
this.setState({'items': jsonData});
this.setState({'prevName': jsonData[0].general.firstName + ' ' + jsonData[0].general.lastName});
this.setState({'selectedProfile': this.state.items[0]});

But this.setState is an async function, meaning that upon setting the state, you cannot assume that this.state is already updated. For the sake of argument, if you are setting multiple values in your state, feel free to combine them in one statement, like:

this.setState({ 
  items: jsonData, 
  selectedProfile: jsonData[0],
  prevName: jsonData[0].general.firstName + ' ' + jsonData[0].general.lastName
});

However, that is not the only issue here, but rather a matter of data flow, that you seem to have. You should consider that you don't have the data yet upon the first render. So to handle that, you should be checking inside your render function, if there is actually a selectedProfile before trying to render any of its properties. So in that case, you could change render like this:

render() {
  const { items, selectedProfile } = this.props;
  if (!selectedProfile) {
    // render nothing till the selected profile is there
    return null;
  }
  // the rest of your rendering to return the grid (you can now use items & selectedProfile without the prefix this.state
}

Which would mean there is no need to set the default state to an empty array (which it isn't anymore, as you are now assigning an object to it, but I guess you missed that when refactoring for previous comments)

constructor() {
  super();
  this.state = {
    items: [],
    selectedProfile: null
  };
}

One important note in your code would be DOM manipulation, you shouldn't do DOM manipulation through the traditional way of selecting an item and mutating it, in fact, it is strongly recommended to leave all rendering up to React. There, the classNames library can help you out in conditional className selections.

Your current implementation of this.handleItemClick will also lose the context to this for the time being, you can choose to bind handleItemClick in your constructor (as you seem to do with getItems, where that one is not necessary), or using the arrow function for the event handler.

So, if all these points are changed, you kinda come up with a similar code (note that I used to dog api, as it easy to use and has a public api I can write to)

const Dog = ( { name, content, isSelected, onSelected } ) => {
  return <div onClick={() => onSelected(name)} className={ classNames('breed', {'selected': isSelected}) }>{ name }</div>;
};

class DogList extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      selectedBreed: null
    };
  }
  componentWillMount() {
    this.fetchDogs();
  }
  componentDidUmount() {
    this.mounted = false;
  }
  selectBreed( breedName ) {
    this.setState( { selectedBreed: breedName } );
  }
  fetchDogs() {
    fetch('https://dog.ceo/api/breeds/list/all')
      .then( response => response.json() )
      .then( json => {
        this.setState( { breeds: json.message, loading: false } );
      })
      .catch( err => console.error( err ) );
  }
  render() {
    const { loading, breeds, selectedBreed } = this.state;
    if ( loading ) {
      return <div>Loading dogs list</div>;
    }
    return <div className="dogs">{ Object.keys( breeds ).map( key => <Dog key={key} name={key} content={breeds[key]} isSelected={selectedBreed === key} onSelected={(...args) => this.selectBreed(...args)} /> ) }</div>;
  }
}

const target = document.querySelector('#container');
ReactDOM.render( <DogList />, target );

.breed {
  margin: 3px;
  padding: 5px;
}
.selected {
  border: solid #a0a0a0 1px;
  background-color: #00ff00;
}

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script id="classnames" src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<div id="container"></div>

jmargolisvt · Accepted Answer · 2018-06-08 20:19:27Z

0

You can't mess with the state by normal assignment. This won't work:

this.state.selectedProfile[0] = jsonData[0].general.firstName;

You should loop through your data and change your state accordingly using setState.

answered Jun 8, 2018 at 20:19

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

2 Comments

howHighUR Over a year ago

still undefined

howHighUR Over a year ago

sure, here it goes

Zachary Gilbert · Accepted Answer · 2018-12-04 14:04:28Z

0

This worked for me. Make two different render blocks. The first one render checks if your props are ready. If so it calls the second with this.renderPage(). Check Semantic React for info on Loader.

    render() {
        return (this.props.ready) ? this.renderPage() : <Loader active>Getting data</Loader>;
    }

    renderPage() {
        //your render code here
    }

answered Dec 4, 2018 at 14:04

Zachary Gilbert

1

Collectives™ on Stack Overflow

Semantic UI + React issue with undefined data

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related