React how click to input value?

Question

it's possible to click input values in react?

so i have a input whihc i set values to array with comma:

i can render my input values in jsx like that:

const listItems = this.props.Data.codes.map((item) =>
  <span key={index} onClick={onClick=event = () => this.somFunc(event, item)}>{item}</span>
);

and at onClick i can get the each item so each value which i put to array from input.

but possible to make this mapping in input ?

so in input will be displaying my values like:

value1 value2 value3

and i will be available to click them and call some function at onClick

Do you mean you want to have some sort of tag field? Look at this package here: npmjs.com/package/react-tag-input — lumio
– lumio, Commented Aug 13, 2019 at 13:29
Create an input field which shows data from the state. Then, in somFunc(event, item), update the appropriate state value. — Yousuf Khan
– Yousuf Khan, Commented Aug 13, 2019 at 13:30
I already can show them in another place and click them it's okey but i want to make like that: so input where you will write and show them in one place ibb.co/tKCR1ZG — user3348410
– user3348410, Commented Aug 13, 2019 at 13:33

Sylens · Accepted Answer · 2019-08-13 13:37:52Z

2

What you are describing is a tag input, you can use an existing package like this one. https://www.npmjs.com/package/react-tag-input

I will recommend using the npm package since it will have more community support.

answered Aug 13, 2019 at 13:37

Sylens

1,1778 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yes i look the package but there is seems not putting tag into input

ou i understood the point there is just some css hack. Oke. thank you