How to show nested elements using react

Question

I am working on creating dynamic elements, when User clicks on add I am creating another set of elements.

once I am creating the elements I have one select option there so on selection of particular options I am creating one more field.

I have first name and select age two elements, there I have age as >18 and <=18 so on this basis I am creating one more field.

Here when I am creating one more field I am facing issue.

What I am doing

I am looping my elements
then for new element which I going to be created on selection I am doing conditional rendering

{onChangeAge && indexVal === index && (

So What I am doing is when onChange of select I am checking the value if it is >18 then setting state to that value and showing the new input field,

But it is not working as expected, When I am selecting >18 in first set of element and selecting <=18 in second then it is again setting as false.
That is due to indexVal === index I don't know how to handle that

Issue

The issue is when I am selecting age <=18 the I am showing one input field, the I created one more element set and there if I am again selecting <=18 then the Input field I have created in first component is not showing up.

This is my code sandbox link In my code sand box I have working code, please do check

in the onChange handler of select element, you are not updating the age of that input. Here's the demo of couple of changes you need to make in your code to fix the problem. — Yousaf
– Yousaf, Commented Oct 28, 2020 at 9:32

Shubham Verma · Accepted Answer · 2020-10-28 11:41:19Z

1

I would suggest either keep track of age input by updating existing inputHolder or track via separate state. It would be like this:

Update onChange age

const onChangeAge = (e, ind) => {
    console.log(e.target.value);
    let val = e.target.value;
    console.log(typeof ind, ind, typeof val);
    let inputHolderCopy = [...inputHolder];
    setindexVal(ind);
    inputHolderCopy = inputHolderCopy.map((data) => {
      if (data.id === ind + 1) {
        return { ...data, currentSelectedAge: val };
      }
      return data;
    });
    setinputHolder(inputHolderCopy);

    if (val === "<=18 ") {
      console.log("Hello");
      setageVal(true);
    } else {
      setageVal(false);
    }
  }

Now simply check here:

{onChangeAge && li.currentSelectedAge === "<=18" && (
              <div>
                <input
                  type="text"
                  name={`data[${index}].idCred`}
                  id="idCred"
                  placeholder="ID"
                  ref={register({ required: "ID is required" })}
                />

                <br></br>
                <label htmlFor="idCred">Name</label>
              </div>
            )}

here is the demo: https://codesandbox.io/s/proud-river-5bg7o?file=/src/App.js:2093-2527

Note: This is just one approach. You can do other way also. Like creating variable in inputHolder and keep track its value.

edited Oct 28, 2020 at 11:41

answered Oct 28, 2020 at 9:41

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

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

3 Comments

vivek singh Over a year ago

hey in your case I have tried it is working fine but what if i select something else, how can i remove that from the state

Shubham Verma Over a year ago

You mean if you choose different age input should remove?

Shubham Verma Over a year ago

I have updated my code. Looks like its better to track in each of its object. Check sandbox

Collectives™ on Stack Overflow

How to show nested elements using react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related