Accessing individual array elements in React called from API

17,145

Try this:

render () {
           return(
             <Grid>
               <Row componentClass = "section" id = "non-profits">
                  {(props && props.data && props.data.length > 0)} ? {props.data[0].name} : <span>None</span> //This should work
               </Row>
             </Grid>
           );
      }

I did not test this code. But this should work.

Share:
17,145

Related videos on Youtube

user2757964
Author by

user2757964

Updated on May 15, 2022

Comments

  • user2757964
    user2757964 13 days

    I'm writing a webapp using React and Redux. I have a Redux action that uses XMLHttpRequest to populate my reducer with data (in array format) from a REST API. I call the action in componentDidMount because thats what the React documentation says is best. When I try to access them in my render function I get a "array[0] is undefined message in the console." But the funny thing is if I define a function that returns JSX using array.map() then it works fine. It just doesn't let me access them individually. Does anyone know why that is?

    Code:

    import React from 'react'
    import {connect} from 'react-redux'
    import {bindActionCreators} from 'redux'
    import {Row, Col, Grid} from 'react-bootstrap'
    import {fetchData} from '../actions'
    
    class DataContainer extends React.Component {
    
      listData(array){
        return array.map((element) => {
          return(
            <Col lg = {3} md = {4} sm = {6} key = {element.id}>
              <h3>{element.name}</h3>
              <p>{element.description}</p>
            </Col>
          );
        });
      }
    
      componentDidMount(){
        this.props.getData() //call API
      }
    
      render () {
          return(
            <Grid>
              <Row componentClass = "section" id = "non-profits">
                {listData(props.data)} //this works
                {props.data[0].name} //this doesn't work
              </Row>
            </Grid>
          );
    
      }
    }
    
    function mapStateToProps(state){
      return{ //maps reducer state to props for use in component
        data: state.data //state.data stores the data from the REST API
      };
    }
    
    function mapDispatchToProps(dispatch){
      return bindActionCreators({getdata: fetchdata}, dispatch)//fetchData is the redux action that
                                                              //calls the REST API
    
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(DataContainer);
    
  • user2757964
    user2757964 over 5 years
    Thank you, that did work. I had tried testing for props and props.data before but testing that props.data.length > 0 turned out to be the condition that made it work. I'm still curious about array.map() though if anyone has an answer
  • Luke101
    Luke101 over 5 years
    When the app initializes the data array is empty. Therefore, its still "loopable" so the array map will work. props.data[0] access the first element in the array but if the array is empty on application load it will error because you're accessing something that does not exist. Also, you can still loop through an empty array using a for statement as well as long as the array is defined.