CODEWITHSUNDEEP
javascriptreactjs
Ashwin Vivek
Ashwin Vivek

Reputation: 23

React Child Component Not Rendering

I have created a parent class that holds two child components, with one of the children trying to pass data back to the parent's state. When I run the code, I do not get any runtime errors, but the child that is sending data back to the parent is not rendering at all (even initially). All the components are capitalized so that is not the issue. I think it has something to do with the syntax in the OnClick function, or my method of passing the props back to the parent. I am new to React, so any help would be appreciated!

Parent Class

  class DropdownParent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {propsForClassDropdown: []};
    this.getClasses = this.getClasses.bind(this);
  }

  getClasses(subjectTitle){
    var chosenSubject = Subjects.subjectTitle;
    this.setState({propsForClassDropdown: {chosenSubject}.classes})
  }


  render(){
    return(
    <div className = "DropdownContainer">
      <SubjectDropdown triggerListChange = {this.getClasses} />
      <ClassDropdown />     //this one renders properly
    </div>
    )
  }
}

Child component that is not rendering

class SubjectDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: "", searchStarted: false };
    this.searchUpdated = this.searchUpdated.bind(this);
  }
  searchUpdated (term) {
    this.setState({searchTerm: term, searchStarted: true})
  }

  render(){
    console.log("rendering");
    const filteredSubjects = Subjects.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
    return(
    <div>
      <div className = "SubjectDropdownContainer">
        <SearchInput className='search-input' onChange={this.searchUpdated} />
            <div className = 'SubjectDropdown'>
              {filteredSubjects.map(Subjects => {
                  return (
                    <div>
                    <Button className = "dropdownItem" key={Subjects.id} onClick={()=>this.props.triggerListChange(key)}>
                      {Subjects.subject.name}
                    </Button>
                    </div>
                  )
              })}
            </div>
      </div>
    </div>
    )
  }
}

Upvotes: 0

Views: 12107

Answers (2)

thenormalsquid
thenormalsquid

Reputation: 96

In your onClick handler, you pass key to triggerListChange but key isn't defined anywhere.

{filteredSubjects.map(Subjects => {
              return (
                <div>
                <Button className = "dropdownItem" key={Subjects.id} onClick={()=>this.props.triggerListChange()}>
                  {Subjects.subject.name}
                </Button>
                </div>
              )
          })}

Assuming Subjects is within scope of the parent and child component, and Subject is an object, that should work.

In the callback to your map function: filteredSubjects.map(Subjects => { the name of the Subjects parameter collides with your global Subjects object. Try changing that to: filteredSubjects.map(subject=> { and pass subject.id to triggerListChange. Ie; onClick={() => this.props.triggerListChange(subject.id)

In your getClasses function:

getClasses(subjectTitle){
  var chosenSubject = Subjects.subjectTitle;
  this.setState({propsForClassDropdown: {chosenSubject}.classes})
}

Change var chosenSubject = Subjects.subjectTitle to accessing the property via bracket [] notation: Subjects[subjectTitle] because the id from your subject object might be a string.

Upvotes: 1

Ashwin Vivek
Ashwin Vivek

Reputation: 23

Turns out my export statement in the parent component was incorrect. Not sure why one of the components was still rendering though.

Upvotes: 0

Related Questions