CODEWITHSUNDEEP
reactjs
Rowa
Rowa

Reputation: 35

How to access the passed prop array inside the child component

I am trying to access an array of venues as a state prop from the parent into the child component file. The array 'Venues' has a set of properties each like venue.name and venue.location.address

I can see that the prop has been successfully passed but when I try to map the array (as name): it just shows the number of items in the array and the array passed in the div 'code' itself is null. 

import DropDown from './DropDown.js';

class App extends Component {

  state = {
    venues : []
  }

  componentDidMount() {
    this.getVenues()
  }

The venue locations are from a third party API below

  getVenues = () => {
    const endPoint = "https://api.foursquare.com/v2/venues/explore?"
    const parameters = {
      client_id: "CFSJXP",
      query: "Outdoors & Recreation",
      near: "Singapore",
      v: "20200404"
    }
   })

  }

  render() {
    return (

               <DropDown dataFromApp = {this.state.venues} />

      )
  }
}

Then in the Component file

  render () {
    return (

        <section>
          <h4>Location details</h4>
         ``` <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}
          </div> ```
        </section>
      </section>
    )
  }

And when I try to stringify the array the following error is thrown:

Objects are not valid as a React child (found: object with keys {reasons, venue, referralId}). If you meant to render a collection of children, use an array instead.

How can I pass the prop data into the div 'code' and then display its data on the sidebar?

Upvotes: 2

Views: 918

Answers (4)

Naxxa Consulting
Naxxa Consulting

Reputation: 51

Error says that you are rendering an object in DOM, you can't do that you have to render single key of object or to render multiple keys you have to iterate over keys.

Your mistakes

  1. Firstly, You are not storing data in local state. use this.setState({venues : [response array here]})

  2. Secondly, you should define key of venue object in <li key={venue}>{item}</li> like this <li key={venue}>{item.key}</li>

Upvotes: 0

raman
raman

Reputation: 980

wrap state inside a constructor

constructor(){
  super();
  this.state = {
    venues : []
  };
}

in getVenues() function set the venues using 

this.setState({ venues: // the response from the third party API });

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

The problem is here only,

{this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}

You are directly trying to render item which is a object and not a plain data.

Your error also stating the same,

(found: object with keys {reasons, venue, referralId})

It means that item = {reasons="", venue="", referralId=""}

You must do something like this,

{this.props.dataFromApp.map(item => <li key={item.referralId}>{item.venue}</li>)}

Upvotes: 0

Anil Kumar
Anil Kumar

Reputation: 2309

Try this

 <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item.venue}</li>)}
 </div>

Upvotes: 1

Related Questions