How to pass object down into react component?

Question

React newbie here! I have an object cats which contains a list of lat long cords for cat locations. I am trying to pass the object down into the MapContainer component like so:

<MapContainer cats={cats} /></div>

MapContainer component:

export class MapContainer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      cats: // this should come from the parent component
    }
  }

  displayMarkers = () => {
    return this.state.cats.map((cat, index) => {
      return <Marker key={index} id={index} position={{
       lat: cat.latitude,
       lng: cat.longitude
     }}
     onClick={() => console.log("You clicked me!")} />
    })
  }

  render() {
    return (
      <Fragment>
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          {this.displayMarkers()}
        </Map>
      </Fragment>
    );
  }
}

How can I adjust my class component to take the cats object in?

did you try this.props.cats.map instead of this.state.cats.map in displayMarkers function? — Amit Chauhan
– Amit Chauhan, Commented Feb 12, 2020 at 10:16
You'll need to use a lifecycle function to place the cats object from props into state, otherwise, as the other comments have pointed out the cats object is not present on state. — jacobedawson
– jacobedawson, Commented Feb 12, 2020 at 10:18

klugjo · Accepted Answer · 2020-02-12 10:22:42Z

1

A few remarks:

You can access the properties passed to a child component through props in the constructor or this.props in other lifecycle functions
It is considered bad practice to copy the props value to the state.

So just access cats from props directly:

export class MapContainer extends Component {
  displayMarkers = () => {
    return this.props.cats.map((cat, index) => {
      return <Marker key={index} id={index} position={{
       lat: cat.latitude,
       lng: cat.longitude
     }}
     onClick={() => console.log("You clicked me!")} />
    })
  }

  render() {
    return (
      <Fragment>
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          {this.displayMarkers()}
        </Map>
      </Fragment>
    );
  }
}

edited Feb 12, 2020 at 10:22

answered Feb 12, 2020 at 10:19

klugjo

21k10 gold badges65 silver badges83 bronze badges

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

Comments

Ashkan Pourghasem · Accepted Answer · 2020-02-12 10:18:04Z

1

Generally deriving state from props is not what you want. Why not use the prop directly? But if you really must do it like that (i.e. to initialize the state using the props that come in) you should check out the getDerivedStateFromProps lifecycle hook:

getDerivedStateFromProps React.js

answered Feb 12, 2020 at 10:18

Ashkan Pourghasem

7483 silver badges12 bronze badges

1 Comment

BennKingy Over a year ago

Thanks for this! I am using the props directly now and I feel like I just levelled up in React lol

D.matoschaves · Accepted Answer · 2020-02-12 10:23:56Z

0

Probably you don't need to convert the props cats into state in your MapContainer component, and instead just use the object / array as it is, but if you wanted to have it as state, you could do:

constructor(props) {
    super(props);

    this.state = {
      cats: props.cats
    }
  }

answered Feb 12, 2020 at 10:23

D.matoschaves

364 bronze badges

Collectives™ on Stack Overflow

How to pass object down into react component?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related