CODEWITHSUNDEEP
reactjs
bp123
bp123

Reputation: 3417

Call child component function from parent

How do I call a child component function from the parent component? I've tried using refs but I can't get it to work. I get errors like, Cannot read property 'handleFilterByClass' of undefined.

Path: Parent Component

 export default class StudentPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  newStudentUserCreated() {
    console.log('newStudentUserCreated1');
    this.refs.studentTable.handleTableUpdate();
  }

  render() {
    return (
      <div>
        <StudentTable
          studentUserProfiles={this.props.studentUserProfiles}
          ref={this.studentTable}
        />
      </div>
    );
  }
}

Path: StudentTable

export default class StudentTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     studentUserProfiles: props.studentUserProfiles,
    };

    this.handleTableUpdate = this.handleTableUpdate.bind(this);
  }

  handleTableUpdate = () => (event) => {
    // Do stuff
  }

  render() {
    return (
      <div>
       // stuff
      </div>
    );
  }
}

UPDATE Path StudentContainer

export default StudentContainer = withTracker(() => {
  const addStudentContainerHandle = Meteor.subscribe('companyAdmin.addStudentContainer.userProfiles');
  const loadingaddStudentContainerHandle = !addStudentContainerHandle.ready();
  const studentUserProfiles = UserProfiles.find({ student: { $exists: true } }, { sort: { lastName: 1, firstName: 1 } }).fetch();
  const studentUserProfilesExist = !loadingaddStudentContainerHandle && !!studentUserProfiles;

  return {
    studentUserProfiles: studentUserProfilesExist ? studentUserProfiles : [],
  };
})(StudentPage);

Upvotes: 2

Views: 13883

Answers (1)

wdm
wdm

Reputation: 7189

My design here is: component (Child 1) creates a new studentProfile. Parent component is notified ... which then tells component (Child 2) to run a function to update the state of the table data.

I'm paraphrasing the OP's comment here but it seems the basic idea is for a child component to update a sibling child.

One solution is to use refs.

In this solution we have the Parent pass a function to ChildOne via props. When ChildOne calls this function the Parent then via a ref calls ChildTwo's updateTable function.

Docs: https://reactjs.org/docs/refs-and-the-dom.html

Demo (open console to view result): https://codesandbox.io/s/9102103xjo

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.childTwo = React.createRef();
    }
    newUserCreated = () => {
        this.childTwo.current.updateTable();
    };
    render() {
        return (
            <div className="App">
                <ChildOne newUserCreated={this.newUserCreated} />
                <ChildTwo ref={this.childTwo} />
            </div>
        );
    }
}

class ChildOne extends React.Component {
    handleSubmit = () => {
        this.props.newUserCreated();
    };
    render() {
        return <button onClick={this.handleSubmit}>Submit</button>;
    }
}

class ChildTwo extends React.Component {
    updateTable() {
        console.log("Update Table");
    }
    render() {
        return <div />;
    }
}

Upvotes: 3

Related Questions