[React.js][HELP] Mapping 2 different array at the same instance in 1 component

1 
export class Modal extends React.Component {
  constructor(props) {
    super(props)
      this.state = {
        data:["bob","don"],
        desc:["he is hot!","Is smart!"]
      }
  }

render() {
    return (
              {this.state.data.map((val,i) =>
                <div>
            <Well data={val}  key={i} onDelete={this.onDelete.bind(this)}/>
              </div>
          )}
}

I want to something that works but logic of this…

{this.state.desc.map((val2,i) =>
          {this.state.data.map((val,i) =>
            <div>
        <Well data={val} desc={val2} key={i} onDelete={this.onDelete.bind(this)}/>
          </div>
      )}
    )}

I am trying to correct that every instance of bob will have the description of "“he is hot!”, and dan with “he is smart!”.

2

Ideally, we would be able to do this strictly within a functional paradigm with a zip() method. Unfortunately, JavaScript doesn’t have this. You can implement it yourself (not too difficult), but you could also just fudge it.

render() {
   const { data, desc } = this.state;
   return (
      <div className="thatThingIAlwaysForgetToAddInReact">
        data.map((val, index) => <Well data={val} desc={desc[index]} key={index} onDelete={this.onDelete.bind(this)}/>
      </div>
    )
}

You should probably not use that class name, but I always forget to wrap iterated children in a parent element.

1 Like
3

I assume the 2 arrays posted are example array sbut is there any reason not to do this with ojbects, which are more interesting, descriptive and easier to reason about ?

this.state = {
data:[
{"name": "bob","desc": "he is hot!"},
{"name": "don","desc": "is smart!"},
]
}
4

Sounds great, but I am mapping throughout the state which is an object which can’t be mapped out for my component, or try use data[0].name which won’t solve my issue of trying pass desc into my component too…

I could be brain farting, and sound completely dumb, but I am trying and not getting any results

5

Thanks alot, your really smart! Thank you alot, and AdventureBear for some different idea too