Pass props to component in render method?

Question

I have a button component in my render method ( DownloadReportsButton ) that will trigger a modal onClick and perform an API call.

The logic for the modal and the API call have already been moved to the button component, but how do I pass my data (an array called awsFileKeys ) to perform the API call to the DownloadReportsButton component?

My view:

render() {

    const {reportJSON} = this.state; 

    const content = (      
      <div className="container">
        <div className="card mb-3">
        <div className="card-header">
              <div className="float-left">
                <i className="fas fa-list mr-1"></i>
                Threat Reports
              </div>
              <div className="float-right">
                <DownloadReportsButton />
              </div>
              </div>            
              <div className="card-body">
              <div className="table-responsive">
              <Busy isBusy={this.state.tableIsBusy}>
                  <ReactTable
                    data={reportJSON}
                    filterable
                    defaultFilterMethod={(filter, row) =>
                    String(row[filter.accessor]) === filter.value}
                    columns={[
                      {
                        id: "checkbox",
                        accessor: "",
                        Cell: ({ original }) => {
                          return (
                            <input
                              type="checkbox"
                              className="checkbox"
                              checked={this.state.selected[original.linkRaw] === true}
                              onChange={() => this.toggleRow(original.linkRaw)}
                            />
                          );
                        },
                        Header: x => {
                          return (
                              <input
                                  type="checkbox"
                                  className="checkbox"
                                  checked={this.state.selectAll === 1}
                                  ref={input => {
                                      if (input) {
                                          input.indeterminate = this.state.selectAll === 2;
                                      }
                                  }}
                                  onChange={() => this.toggleSelectAll()}
                              />
                          );
                      },
                        sortable: false,
                        width: 45
                      },
                      { Header: 'Date', 
                        accessor: 'date', 
                        maxWidth: 120,
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["date"] }),
                        filterAll: true},

                      { Header: 'Title', 
                        accessor: 'title',
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["title"] }),
                        filterAll: true},

                      { Header: 'Link', 
                        accessor: 'link', 
                        maxWidth: 120},
                    ]}
                    loading={this.state.tableIsBusy}
                  />
              </Busy>
              </div>
            </div>
            <div className="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
          </div>
      </div>
    )

My button component:

class DownloadReportsButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    }
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(){
    this.setState({isOpen: true});
  }

  closeModal(){   
    this.setState({isOpen: false});
  }

  downloadMultipleReports(e){

    fetch(config.api.urlFor('downloadMultipleReports', { fileKeys: this.state.awsFileKeys }))
    .then((response) => response.json())

    this.closeModal();

  }

  render() {
    return (
      <div>
      <button type="button" className="btn btn-primary" style={{marginLeft: '10px'}} onClick={this.openModal}>Download Selected</button>  
      <Modal
          isOpen         = {this.state.isOpen}
          onRequestClose = {this.closeModal}
          style          = {modalStyle}
          contentLabel   = "Generate Report Input"
        >
          <form data-test-id='GenerateReport-modal-1'>
          <h4 style={{textAlign: "center", marginBottom: "15px"}}>Your files are downloading, please wait...</h4>
          </form>
        </Modal>
      </div>
    );
  }
}


export default DownloadReportsButton

Answer 1

If I am understanding your question soundly (please excuse me if it is not the case) you can pass props to the DownloadReportsButton component by setting attributes when you include it in your view render method. Assuming that the array is a component of the state of your view, you can include DownloadReportsButton as follows:

<DownloadReportsButton fileKeys={ this.state.awsFileKeys }/>

The DownloadReportsButton can access to this information as this.props.fileKeys .
In general, the attributes you specify when including a React component are accessed as component props .

I have chosen a prop name different than awsFileKeys to make the attribute-prop connection clear. Of course, you can use the same name if you want:

<DownloadReportsButton awsFileKeys={ this.state.awsFileKeys }/>

and therefore access the data as this.props.awsFileKeys in the DownloadReportsButton .

Hope it helps - Carlos