Update state of input on click , from table list

Question

Thanks in advance.

How do update a react input value to state on button click. I have a list of input and button listed in table row. Need to update the state array of specific item.

Code is below

    <TableCard>
      <Table dataSource={itemListArray}>
        <Column
          title="ItemName"
          align="left"
          render={item => (
                    <div>
                      <Input value={item.Name} />
                      <Icon onClick={???} />
                     </div>
          )}
        />
      </Table>
    </TableCard>

[{ItemName:'ccc', Noise: 'NA'}, {ItemName:'bbb', Noise: 'NA'}] ItemName will be displayed in the , besides there is and icon to click. I need to update the state from input only if they click icon. — Ankit Jayaprakash, Dec 05 '19 at 13:21
If ccc is updated to ccca then you need to update the array as [{ItemName:'ccca', Noise: 'NA'}, {ItemName:'bbb', Noise: 'NA'}]. Is that your requirement? — Raja Sekar, Dec 05 '19 at 13:24
you are trying to change table data with icon click with the value provided in Input ? — Sushilzzz, Dec 05 '19 at 14:20

Antoni · Answer 1 · 2019-12-05T14:53:01.510

You should create a new component for the render which gets item. In this component you can use it own state and item

class Example extends React.Component {
      state: {
        itemListArray: [{ name: 'Name', noise: 'NA' }]
      }

      handleChange: Function = ({ index, name, value }) => {
        let newValueArray = [ ...itemListArray ]

        newValueArray[index] = {
          ...newValueArray[index],
          [name]: value,
        }

        this.setState({ itemListArray: newValueArray })
      }

      render() {
        const { itemListArray } = this.state

        return (
          <>
             <TableCard>
              <Table dataSource={itemListArray}>
                <Column
                  title="ItemName"
                  align="left"
                  render={(item, index) => (
                    <ExampleItem
                      item={item}
                      index={index}
                      onChange={this.handleChange}
                    />
                  )}
                />
              </Table>
            </TableCar
          </>
        );
      }
    }

    import React, { useState } from 'react';

    function ExampleItem({ item, index, onChange }) {
      handleClick: Function = () => {
        onChange({
          index,
          name: 'name',
          value: item.name + 'a',
        })
      }

      return (
        <>
          <Input value={item.name} />
          <Icon onClick={this.handleClick}>
            Add an A to name string
          </Icon>
        </>
      );
    }

How do I update the state with the input value, when user clicks the button. — Ankit Jayaprakash, Dec 05 '19 at 13:38

Update state of input on click , from table list

1 Answers1