score:3

Accepted answer

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.

score:0

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

Related Query

More Query from same tag