How would I iterate through array and display input boxes based on values?

Question

I am new to react and I created I have a json like this:

const parent: [{name:will, kids['child1', 'child2']}
              {name: 'kia' kids['child1']}
              {name: 'jim', kids['child1', 'child2']}]

I am having trouble accessing the values with this json. I am trying to create a list with all the name values in of array so I can put it in a dropdown but I keep getting 'undefined' when i try to print the list in my console.log

Also when I click the name I want to create input boxes based of the length of the kids list of the name selected. So for instance if I click 'will' in the dropdown, two input boxes will form with 'child1' and 'child2' being in both input boxes. but if i click "kia", one input box will form that already has "child 1" in it. Any ideas? I have having a lot of trouble accessing the values.

this is my attempt so far:

import Dropdown from 'react-dropdown';


 parent: [{name:will, kids['child1', 'child2']}
              {name: 'kia' kids['child1']}
              {name: 'jim', kids['child1, 'child2']}]


 
class AppEX extends React.Component {
constructor() {
    super();
    this.state = {
      parentnamelist: []
      parentname: null
      

    }
  }
  
 render() {
namelist: []
this.state.parent.map((e, key) => {
       namelist.push({value:e.name,label:e.name})
  })
        return (

<select name="select" onChange={this.namelist}>
  {num.map(function(n) { 
      return (<option value={n} selected={this.state.selected === n}>{n}</option>);
  })}
</select>

any ideas?

Answer 1

There are various problems here.

1. The parent list was not well formatted, is should look like this:

const parent = [
  { name: "will", kids: ["child1", "child2"] },
  { name: "kia", kids: ["child1"] },
  { name: "jim", kids: ["child1", "child2"] }
]

2. You are using map in your render method to push parent names into a new list called namelist but you have to use forEach. map transforms a list while forEach does something to each member.

const namelist = [];
this.state.parent.forEach(e => {
  namelist.push({ value: e.name, label: e.name });
});

3. Now render return: The onChange handler must be a function, since you want to track the selected parent, I guess you want to save it to your state:

handleParentChoice = e => {
  e.persist();
  this.setState({
    parentname: e.target.value
  });
};

Then

return (
  <div>
    <select name="select" onChange={this.handleParentChoice}>
      {namelist.map(n => (
        <option key={n.value} value={n.value}>{n.label}</option>
      ))}
    </select>
    <br />
    {this.state.parentname && // Shows below stuff only if parentname is not null
      this.state.parent
        .find(p => p.name === this.state.parentname) // Find the parent based on the saved name, then map the kids into input tags
        .kids.map(k => <input key={k} type="text" />)}
  </div>
);

Also, when you map something, every child should have a key prop.

See the code working here