Change input value after click on list element

Question

I have got form with input

    <form onSubmit={handleSubmit}>
                        <input type="search"
                               onChange={handleChange}
                               onFocus={() => setFocus({name: true})}
                               onBlur={() => setFocus({name: false})}
                               value={inputName}
                        />
       </form>

and the list of elements which is rendered after this input field has focus. This input field is live searcher for elements of this rendered list.

the code to render list:

<div>
      {
           objects.map((object, index) => {
                 return (
                   <ul>
                          <li key={index}>
                                {object.name}
                          </li>
                   </ul>
                )
           })
       }
</div>

I want to make the action that when I click on the list element, the input field gets this element value. In the picture below, the input field should be Object 2 after I click on Object 2 element

Due to there are two independent jsx objects, I have no idea how can I do this.

VersifiXion · Accepted Answer · 2021-05-20 11:28:53Z

2

You can try to do this with a function triggered onClick on a <li> that sets the inputName value with the object.name :

<div>
<ul>
      {
           objects.map((object, index) => {
                 return (
                   
                          <li key={index} onClick={() => setInputName(object.name)}>
                                {object.name}
                          </li>
                   
                )
           })
       }
</ul>
</div>

And by the way I think your <ul> tag should be outside the map

answered May 20, 2021 at 11:28

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

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

2 Comments

Tushar Shahi Over a year ago

I think the above would help. Just try to find some other property as key. Key as index is a bad practice.

VersifiXion Over a year ago

yes I don't know what the object look like, if there's a property id, he can do key={object.id}

Collectives™ on Stack Overflow

Change input value after click on list element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related