Having trouble rendering data in react component

Question

I'm trying to render the following the 'dogName' value of the following array to the browser, but it's coming up as 'undefined':

[
    {
        "id": 1,
        "dogName": "bruce"
    },
    {
        "id": 2,
        "dogName": "borker"
    },
    {
        "id": 3,
        "dogName": "henry"
    }

]

So, first of all, the data is pulled from a database and set in state in the parent component, where's it's passed as props to the child component 'DogNameList' (which I've trimmed down to just the relevant bits):

import React from 'react';
import './styles.css'
import DogList from './DogList'
import Dogue from './Dogue'
import axios from 'axios'
import DogNameList from './DogNameList'

class App extends React.Component {
constructor(){
  super()
  this.state = {
    **dogName:[]**
  }
}


componentDidMount() {
    axios.get('http://localhost:3000/dogs')
    .then(res => {
        this.setState({
            **dogName:res.data**
          })
        })
        
        .catch(error => {
          console.log(error)
        })
      }


render() {

  return (

    <div>
      <DogNameList **names = {this.state.dogName}**/>
      <Dogue/>
    </div>
    
  );
}

}
export default App;

In DogNameList, the data is mapped over and then passed as props to the 'Dogue' component (stupid names, I know, but this is a personal project):

import React from 'react'
import Dogue from './Dogue'

const DogNameList = (props) => {
    return(
        <div>
            {
                props.names.map(name => {
                    console.log(name.dogName)
                    return <Dogue name = {name} key ={name.id}/>
                })
            }
        </div>
    )
}

export default DogNameList

finally, it's supposed to be rendered to the browser via the 'Dogue' component:

import React from 'react'
import axios from 'axios'

class Dogue extends React.Component {
    constructor(props){
        super(props)

        this.state = {

        }

    }

    render(){
    return (
        <div>
            <img className = 'img' src = {this.props.dogList}/>
            <br/>
            <form className = 'form'>
                <input type = 'text' placeholder = 'Enter dog name'/>
                <br/>
                <button>Submit</button>
            </form>
            **<h2>dog name: {this.props.name}</h2>**
        </div>
    )
    }
}


export default Dogue

Any ideas why it's not working? I console logged the following and it returned the list of names (not as strings, I should add):

                props.names.map(name => {
                    console.log(name.dogName)

Apostolos · Accepted Answer · 2020-07-15 08:09:41Z

1

First of all, replace this

<h2>dog name: {this.props.name}</h2>

with this

<h2>dog name: {this.props.name.dogName}</h2>

because you are creating a component with object, so name property actually holds the object, not the name property of the object.

return <Dogue name = {name} key ={name.id}/>

You also don't declare somewhere this property

{this.props.dogList}

Also to handle the undefined error messages, do this

{this.state.dogName && <DogNameList names ={this.state.dogName}/>}

edited Jul 15, 2020 at 8:09

answered Jul 15, 2020 at 7:58

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

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

3 Comments

Josh Simon Over a year ago

Thanks for that! I re-wrote it as you suggested, however it came back with the following error: 'Dogue.jsx:24 Uncaught TypeError: Cannot read property 'dogName' of undefined'.

Apostolos Over a year ago

also please remove <Dogue/> under the <DogNameList> tag. i guess this was an error too.

Apostolos Over a year ago

@JoshSimon all OK now?

Collectives™ on Stack Overflow

Having trouble rendering data in react component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related