homerboy homerboy - 3 months ago 29
React JSX Question

Mapping an array in Bootstrap column in Javascript/React

This is ultimately what I want to achieve:
enter image description here

What I see is that

WORK
is rendered on the left hand side, in
col-md-3
. The rest on the right is iterated in
col-md-9
. I'm trying to replicate this design, but am having trouble doing so. Here's what I have:

workList(item) {
return (
<section>
<div className="row">
<div className="col-xs-3">
<div className="about-title">
<h1>Work</h1>
</div>
</div>
<div className="col-xs-9">
<div className="about-body">
<h3>{item.company}</h3>
<h4>{item.position}</h4>
</div>
</div>
</div>
</section>
)
}

render() {
return (
<div className="container">
{_.chain(this.props.work).map(this.workList).value()} //this.props.work is just a JSON object that contains a list of the places I've worked at
</div>
)
}


This results in the following:

enter image description here

which is pretty obviously wrong because I'm calling
WORK
the same number of times as the length of the JSON object array. My question is - how can I render a list of arrays specifically on the right side with Bootstrap grids?

Answer

Your problem is that you generate Work and your Items together. You have to seperate them. Since your JSON contains the places you've worked so far, there is no need to generate Work all together with the places.

Here is an example:

workList(item) {
    return (
    // generates rows in your col-9 to get the look you wanted
    <div className="row about-body">
      <div className="col-xs-12">
          <h3>{item.company}</h3>
          <h4>{item.position}</h4>
      </div>
    </div>
    )
}

render() {
    return (
        <div className="container">
              <div className="row">

                // generate left site once
                <div className="col-xs-3 about-title">
                    <h1>Work</h1>
                </div>

              // generate right site once
              <div className="col-xs-9">               
                {_.chain(this.props.work).map(this.workList).value()} //this.props.work is just a JSON object that contains a list of the places I've worked at
              </div>
            </div>           
        </div>
    )    
}

Hope this helps.

Regards, Megajin

Edit: posted the right code.