CODEWITHSUNDEEP
javascriptreactjs
user7370565
user7370565

Reputation:

Uncaught Invariant Violation: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I'm trying to filter out a list of students based on the input value. But I've been getting an error saying "Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {city, company, email, firstName, grades, id, lastName, pic, skill}). If you meant to render a collection of children, use an array instead." I've tried using "Object.assign([], this.state.filteredStudents)" it still didn't work. I'm trying to display information that is contained in an array but in separate objects.

<div className="container">
          <input 
            id="search"
            name="search"
            onChange={this.handleInput} 
            placeholder="Search by name" 
            style={{width: '100%', border: '0', padding: '15px 0 7px 10px'}} 
          />
          <hr />
          {/* {allStudents} */}
          {this.state.search === "" ? allStudents : this.state.filteredStudents}
        </div>

Upvotes: 0

Views: 1928

Answers (2)

Vencovsky
Vencovsky

Reputation: 31565

What happens here is that you have an object with properties.

There is a few things you can do.

You can show the properties you want

Instead of trying to render the full component, you can render some prop of it

{this.state.search === "" ? allStudents : this.state.filteredStudents.email} // render the email string

What you can also do is loop over the values of the object (Object.values) and render each property

{this.state.search === "" ? 
    allStudents : 
    this.state.filteredStudents.map(obj => Object.values(obj)
          .map(propValue => <p>{propValue}</p>))  // render the value of each property
}

But please, be more clear on your question, how you want to display, what you want to display and what you have in your component.

Just keep in mind that this.state.filteredStudents is an object and you can't render objects.

Upvotes: 3

Gena Popov
Gena Popov

Reputation: 26

I think error happened because variable allStudents is not a React object. 

constructor() {
    this.state = {
        filterValue: ''
    }
}

render() {
    const students = [
    {city: '', company: '', email: '', firstName: '', grades: '', id: '', lastName: '', pic: '', skill: ''}
    ] // <-- this is your array of students

    const allStudents = students.filter(student => {
        return student.firstName.includes(this.state.filterValue) || 
            student.lastName.includes(this.state.filterValue)
    }) // <-- Apply filter

    .map(student => {
        return (
            <div key={student.key}>
                <p>Name: {student.firstName} {student.lastName}</p>
                <p>Email: {email}</p>
            </div>)
    }); // <-- Wrap each element into React Component


    return (<div className="container">
          <input 
            id="search"
            name="search"
            onChange={this.handleInput} 
            placeholder="Search by name" 
            style={{width: '100%', border: '0', padding: '15px 0 7px 10px'}} 
            value={this.state.filterValue}
          />
          <hr />
          {allStudents}
        </div>)
}

Upvotes: 0

Related Questions