Question 73014 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to enable multiple input fields on click in React? – Reactjs

I have some fields that I render :

const elements = [
    {
      data: [
        {
          name: 'item1',
          title: 'Item 1',
          data: data.item1,
        },
        {
          name: 'item2',
          title: 'Item 2',
          data: data.item2,
        },
        {
          name: 'item3',
          title: 'Item 3',
          data: data.item3,
        },
        {
          name: 'item4',
          title: 'Item 4',
          data: data.item4,
        },
      ],
    },
    ...
]

I’m rendering by using a child component ( I’m using Grommet here , but it is irrelevant ):

const [disabled, setDisabled] = useState(true);

{elements.map((col, index) => (
      <Box pad="xsmall" key={index} fill>
        <Table>
          <TableBody>
            {col.data.map((el, index) => (
              <SomeComponent
                key={index}
                title={el.title}
                data={el.data}
                name={el.name}
                disabled={disabled}
              />
            ))}
          </TableBody>
        </Table>
      </Box>
    ))}

I have certain fields , that I want to enable on "Edit" button click :

const updateFields = [ 'item2' , 'item4']

I have a Button :

<Box direction="row" pad="xsmall" justify="end">
        <Button
          gridArea="search-button"
          label="Edit"
          size="medium"
          secondary
          onClick={() => {
            // How to loop through the rendered elements , compare their name's and if they are in the udpateFields list , set their disabled state to false ? 
            disabled ? setDisabled(false) : setDisabled(true);
          }}
        />
      </Box>

How to loop through the rendered elements , compare their name’s and if they are in the udpateFields list , set their disabled state to false ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok , I got it , first I define the disabled state like this :

    const [disabled, setDisabled] = useState({
item1: true,
item2: true,
item3: true,
item4: true,
  });

    Then when passing the item state in the component :

    {elements.map((col, index) => (
      <Box pad="xsmall" key={index} fill>
        <Table>
          <TableBody>
            {col.data.map((el, index) => (
              <SomeComponent
                key={index}
                title={el.title}
                data={el.data}
                name={el.name}
                disabled={disabled[el.name]}
              />
            ))}
          </TableBody>
        </Table>
      </Box>
    ))}

    And the onClick :

    onClick={() => {
            updateFields.map((el) =>
              setDisabled((prevState) => {
                return {
                  ...prevState,
                  [el]: false,
                };
              })
            );

  2. 0

    you could use includes method which is determines whether an array includes a certain value among its entries. more information on includes

    disabled={!updateFields.includes(col.name)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search