0

I have the following react class PeopleSelector within I want to get an array of peoples from my people.json.

// @flow

import React from 'react'

type Props = {
  currentPeople: string,
  setPeopleFn: (string) => void
}

class PeopleSelector extends React.Component {
  render() {
    let peoples = require('../data/people.json');

    return <select value={this.props.currentPeople} onChange={e => this.props.setPeopleFn(e.target.value)}>
      <style jsx>{`
        select {
          font-size: 20px;
          line-height: 20px;
          margin-bottom: 20px;
          min-width: 300px;
        }
      `}</style>
      {peoples.map(name => (
        <option key={name}>
          {name}
        </option>
      ))}
    </select>
  }
}

export default PeopleSelector

Sadly there occurs an error saying people.map is not a function. But why?

My JSON looks like

{
    "peoples": [
        {
            "focusedTrackId": "MOBILE",
            "milestoneByTrack": {
                "COMMUNICATION": 3,
                "CRAFT": 2,
                "DESKTOP": 0,
                "MENTORSHIP": 2,
                "MOBILE": 3,
                "PROJECT_MANAGEMENT": 3,
                "SERVER": 0
            },
            "name": "Bocksteger, Daniel",
            "title": "Entwickler I"
        }
    ]
}

Is it not possible to render the JSON into an object of peoples?

Using peoples.peoples.map results in the following react-error:

Objects are not valid as a React child (found: object with keys 
{focusedTrackId, milestoneByTrack, name, title}). If you meant to 
render a collection of children, use an array instead.
Improve this question

3 Answers 3

Reset to default
4

Your peoples object has another peoples property in it.

So instead of peoples.map(...), use peoples.peoples.map(...)

Also, your are rendering each name wrongly inside the map loop:

{peoples.peoples.map(people => (
  <option key={people.name}>
    {people.name}
  </option>
))}

option key={people.name}

I'd use some sort of id or unique identifier instead.

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

4 Comments

Then I get: Objects are not valid as a React child (found: object with keys {focusedTrackId, milestoneByTrack, name, title}). If you meant to render a collection of children, use an array instead. :-(
@DanielBocksteger answer updated. Please check again :)
Can you also tell me how to return a People object in the select control, where I'm currently returning just the name?
@DanielBocksteger you can't return people object. Browser won't understand and is going to display something like [Object] instead.
0

I think you intent to do peoples.peoples.map(name => {});

When you require the json file you are importing it as a root object. The peoples array will then be (imported as).peoples. i.e peoples.peoples.map();

Improve this answer

1 Comment

Using peoples.peoples.map results in Objects are not valid as a React child (found: object with keys {focusedTrackId, milestoneByTrack, name, title}). If you meant to render a collection of children, use an array instead.
0

You can cleanly extract (destructure) the part you really need like this:

let { peoples } = require('../data/people.json');

Improve this answer

1 Comment

Then I get: Objects are not valid as a React child (found: object with keys {focusedTrackId, milestoneByTrack, name, title}). If you meant to render a collection of children, use an array instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.