Does react have a clean way to get the this.props.values from a list item?

I basically want to get the current items props so I can populate a modal dialog with the data. as per below functions the custom props that I specify like 'id' are accessible, but I really would like to do something like this and have all the props

event.currentTarget.this.props.note

Handler

  clicker(event){
    console.log('clicking the clicker');
    console.log(event.currentTarget.id);

    this.setState({isEdit: true});
    console.log(this.state.isEdit);
  }

View

<div id={this.props.id} onClick={this.clicker} className="aui-item page-card off-track notecards">
       <div className="project-details">
          <div className="card-container">
              <div className="left">
                  <h6>Title</h6>
                  <span>{this.props.note.content}</span>

                  <h6 className="pact">Last status report</h6>
                  <span>{this.props.note.updatedAt}</span>
              </div>

              <div className="right">
                <span>something</span>
              </div>
          </div>

      </div>
    </div>

Does react have a clean way to get the this.props.values from a list item?

I basically want to get the current items props so I can populate a modal dialog with the data. as per below functions the custom props that I specify like 'id' are accessible, but I really would like to do something like this and have all the props

event.currentTarget.this.props.note

Handler

  clicker(event){
    console.log('clicking the clicker');
    console.log(event.currentTarget.id);

    this.setState({isEdit: true});
    console.log(this.state.isEdit);
  }

View

<div id={this.props.id} onClick={this.clicker} className="aui-item page-card off-track notecards">
       <div className="project-details">
          <div className="card-container">
              <div className="left">
                  <h6>Title</h6>
                  <span>{this.props.note.content}</span>

                  <h6 className="pact">Last status report</h6>
                  <span>{this.props.note.updatedAt}</span>
              </div>

              <div className="right">
                <span>something</span>
              </div>
          </div>

      </div>
    </div>

• javascript
• reactjs

2 Answers 2

You can directly access props inside clicker

clicker(event){
    console.log('clicking the clicker');
    console.log(this.props.id);

    this.setState({isEdit: true});
    console.log(this.state.isEdit);
  }

In this case it would be better to create separate ponent. In my opinion not necessary to create big huge views.

So, your ponent should be like this:

function Item({
  id,
  updatedAt,
  content,
  onClick,
}) {
  // We should pass `id` variable to `onClick` handler.
  return (
    <div onClick={() => onClick(id)} className="aui-item page-card off-track notecards">
      <div className="project-details">
        <div className="card-container">
          <div className="left">
          <h6>Title</h6>
          <span>{content}</span>
          <h6 className="pact">Last status report</h6>
          <span>{updatedAt}</span>
        </div>
        <div className="right">
          <span>something</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Or, if you don't want to use separate ponent, you can access this.props variable from clicker event handler:

clicker(event){
   // this.props are accesible here.
   this.setState({isEdit: true});
}