react_component_to_render_lists #react

react_component_to_render_lists.md

React component that renders multiple users(as lists) and having

const listusers = modifiedArr.map((user, index) => <tr key={index}>
        <td>
          <input
            name={`checkbox${index}`}
            type="radio"
            value="Active"
            checked={props.state.checkedObj[`checkbox${index}`]
            ? true
            : false}
            onChange={(e) => {
            props
              .actions
              .onEditRadioInput(e, user);
          }}
            onInput={e => {
            flag = !flag;
            props
              .actions
              .onEditRadioInput(e, user)
          }}/>
        </td>
        <td>
          {user.username}
        </td>
        <td>
          {user.useremailaddress}
        </td>
        <td>{user.role}</td>
        <td
          onClick={(e) => {
          props
            .actions
            .onToggleActiveStatus(e, index);
        }}>
          {user.isactive
            ? <a className="label label-success">Active</a>
            : <a className="label label-danger">Inactive</a>}

        </td>
      </tr>);

Then at container component, do this -

onEditRadioInput = (event, user) => {

   this.setState({onEditCurrentUserId: user.id, onEditCurrentUserName: user.username, onEditCurrentUserRole: user.role, onEditCurrentUserStatus: user.isactive, currentUserData: event.target.name})
   const name = event.target.name;
   const keys = Object.keys(this.state.checkedObj);
   if (keys.length > 0) {

     keys.forEach((item, index) => {
       if (item === name) {
         this.setState({
           checkedObj: {
             [name]: true
           }
         })
       } else {
         this.setState({
           checkedObj: {
             [item]: false,
             [name]: true
           }
         })
       }
     })

   } else {
     this.setState({
       checkedObj: {
         [name]: true
       }
     })
   }

 }