Как передать динамически созданные реквизиты компоненту?

Question

Я новичок в реакции JS.Здесь у меня есть таблица, которая имеет функциональные возможности флажков. В этом я создаю динамическое состояние и хочу передать его дочернему компоненту, где фактическая таблица равна

Мой код похож на

JobList.js

    class JobList extends React.Component { 

    constructor(props) {
    this.state = {
          isCheckd: false
     }

     handleCheckBox = () => {
        this.setState({
          isCheckd: !this.state.isCheckd
        }, () => {
          this.props.jobs.forEach((item) => this.setState({ [item.jdName]: this.state.isCheckd }))
        });
      }

      handleTableCheckboxChange = (e) => {
        this.setState({
          [e.target.name]: e.target.checked
        }, () => {
          const uncheckedItems = this.props.jobs.filter((item) => !this.state[item.jdName])
          this.setState({
            isCheckd: uncheckedItems.length === 0 ? true : false
          });
        });
      }
     return() (
       <table className="table" id="actions-table">
                  <tbody>
                    <tr>
                      <td className="text-right mr-1"><input type="checkbox" checked={this.state.isCheckd} onChange={this.handleCheckBox} />
    </td> </tr></tbody></table>
    }
 <UserJobsTabel
              jobList={filteredList}
              sortAscending={this.sortData}
              sortCountAndScoreAscending={this.sortNumbersAscending}
              addNewRow={this.addNewRow}
              isRowAddingEditorVisible={this.props.isRowAddingEditorVisible}
              removeRow={this.removeRow}
              checked={this.state.isCheckd}
              handleTableCheckboxChange={this.handleTableCheckboxChange} />
}

const mapStateToProps = (state) => {
  return {
    jobs: state.UserJobs.jobList,
}
}

Теперь, в этом коде я пытаюсь установить и снять флажки.

this.state[item.jdName] so this state is getting generated for the each element in the array.

Теперь я хочу передать егона UserJobsTable.

   const UserJobsTable = (props) => {
     return (
    <tbody className="text-center">
              {props.isRowAddingEditorVisible && <RowAddingEditor removeRow={props.removeRow} />}
              {props.jobList && props.jobList && props.jobList.length > 0 && props.jobList.map((item, key) => {
                return (
                  <tr key={key}>
                    <td align="center"> <input type="checkbox" name={props.key} checked={props[item.jdName]}   onChange={props.handleTableCheckboxChange} /></td></tr></tbody> ) }




 handleTableCheckboxChange = (e) => {
      this.props.jobs.filter((item) => this.setState(prevState => ({
        dynamicProp: {
          ...prevState.dynamicProp,
          [item.jdName]: e.target.name === [item.jdName] ? true : false
        }
      })
      ))
  }

Я хочу установить на checkbox.Итак, я не понимаю, как пройти через это состояние.Есть ли способ, которым я могу это сделать?

Answer 1

Вы можете заключить динамическое свойство в ключ и передать его.

this.state = {
  isCheckd: false,
  dynamicProp: {}
}

handleCheckBox = () => {
  this.setState({
    isCheckd: !this.state.isCheckd
  }, () => {
    this.props.jobs.forEach((item) => 
      this.setState(prevState => { 
        dynamicProp: {
          ...prevState.dynamicProp,
          [item.jdName]: prevState.isCheckd
        }
      })
    )
  });
}

Во всех ваших setState вы делаете

this.setState(prevState => {
  dynamicProp: {
    ...prevState.dynamicProp,
    [item.jdName]: prevState.isCheckd
  }
})

и соответственно передаете его дочернему элементу.