CODEWITHSUNDEEP
reactjs
bp123
bp123

Reputation: 3417

Get child components to talk to eachother

I know this has been asked before however I've been playing around with this for awhile and I'm not getting it. I have two child components being used and connected by parent page. The first child component is a form and the second child component is a table containing a list of all the userProfiles. When I submit the form, I wand to tell the table component to run a function. How do I do this?

Path: Parent Component

export default class StudentPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

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

Path: AddStudentForm

export default class AddStudentForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };

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

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit} className="mb-3">
        <Input
          type="text"
          name="firstName"
          value={this.state.firstName}
          onChange={this.handleInputChange}
          id="firstName"
          placeholder="First name"
        />
        <button type="submit" className="btn btn-primary">Save</button>
      </Form>
    );
  }
}

Path: StudentTable

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

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

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

  render() {
    return (
      <div>
        <Table hover bordered responsive>
          <thead>
            <tr>
              <th className="border-left border-top-0 border-right-0 pt-0">#</th>
              <th className="border-left-0 border-top-0 border-right-0 pt-0">First name</th>
            </tr>
          </thead>
          <tbody>
            {this.state.userProfile.map((studentUserProfile, idx) => (
              <tr>
                <React.Fragment>
                  <th rowSpan={studentUserProfile.classes.length} className="border-left aling-double-row">{idx + 1}</th>
                  <td rowSpan={studentUserProfile.classes.length} className="aling-double-row">{studentUserProfile.firstName}</td>
                </React.Fragment>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    );
  }
}

Upvotes: 1

Views: 55

Answers (1)

B G Hari Prasad
B G Hari Prasad

Reputation: 178

Way 1: You can achieve this either by using flux or redux

Way 2: You can send a call back form child1(ie page with form) to parent and send it as a prop from parent to child2(ie page with table).

Upvotes: 4

Related Questions