CODEWITHSUNDEEP
javascriptreactjs
Dawn17
Dawn17

Reputation: 8297

How can I change the style of a parent component?

In my parent component, I used a component called List as follows.

  render() {
    return (
      <div className="experiments">

        <div className="experiments-list-container">
          <List rowItems={this.state.employeeData} />
        </div>
      </div>
    );
  }
}

In my List component, I am trying to change the style whenever each item of the row is clicked. So what I did is:

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    return (
      <tr
        className={this.state.isExpanded ? 'testclass' : "experiment-list__row"} 
        //className="experiment-list__row"
        onClick={this.handleRowClick}
      >
        <td>
          {this.props.rowItems.firstName + ' ' + this.props.rowItems.lastName}
        </td>
        <td>{this.props.rowItems.jobTitle}</td>
        <td>{'[email protected]'}</td>
        <td>{this.props.rowItems.employmentType}</td>
      </tr>
    );
  }

whenever I click a row in the table, it will all a function that changes the this.state.isExpanded to True. However, the style that I actually want to change is <div className="experiments"> or <div className="experiments-list-container">. But I am not sure how to change the style of the upper-level component. Please help.

EDIT

Thanks for the reply. What I have tried is,

const List = props => {
  return (
    <table className="experiment-list">
      <tbody>
        <ListHeader />
        {props.rowItems.map((data, i) => <ListRow
          key={i} 
          rowItems={data}
          onRowClicked={props.onRowClicked} />)}
      </tbody>
    </table>
  );
};

and 

  toggleEmployerInfo(e) {
    alert('dd')
  }

in my parent component.

Whenever I click each row, it alerts "dd" correctly.

However, what I eventually want to do is pass in the info of the row clicked.

In my parent component, I use the List by doing

      <div className="experiments-list-container">
        <List
          rowItems={this.state.employeeData} 
          onRowClicked={this.toggleEmployerInfo.bind(this)}
        />
      </div>

This does render all data into each row correctly, but how can I make each row correctly read the id of the item that the row has?

Upvotes: 2

Views: 83

Answers (1)

Troy Carlson
Troy Carlson

Reputation: 3121

You could pass an event handler to the List component and call it whenever a row is clicked. Here I've defined handleRowClick in the parent component as an ES6 arrow function. Then I pass this function as a callback to the child component via the onRowClicked prop.

// parent.jsx

handleRowClick = (id) => {
    // Handle click event, update state, etc.
    console.log(id);
}

render() {
    return (
        <div className="experiments">
            <div className="experiments-list-container">
                <List rowItems={this.state.employeeData} onRowClicked={this.handleRowClick} />
            </div>
        </div>
    );
}

And then call the onRowClicked function on the onClick event for each element you want to react to. 

// list.jsx

render() {
    return (
        // Extremely simplified example...
        <div onClick={() => this.props.onRowClicked('row-id-goes-here')}>row content</div>
    );
}

The arrow function syntax here allows us to specify parameters beside the default event parameter that you would get if you just used onClick={this.props.onRowClicked}.

Here is a post explaining this approach better than I can: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

Upvotes: 1

Related Questions