CODEWITHSUNDEEP
reactjsexpressaxios
Josh Simon
Josh Simon

Reputation: 259

Having trouble rendering data in react component


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)

Upvotes: 0

Views: 27

Answers (1)

Apostolos
Apostolos

Reputation: 10463

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}/>}

Upvotes: 1

Related Questions