How to render a foreach with ReactJS in Laravel

Question

I like to do a foreach of multiple Axios responses. I have the following code sitting in the componentDidMount():

var self = this;
    axios.get('http://reactlaravel.dev/container/count').then(function (response) {

        for (var container in response.data) {
            var d = response.data[container];

            self.setState({
                name: d.name,
                total: d.total,
                current: d.current
            })
        }
    })

In the second file where I render the class I'd like to show not a single return, but all returns from the loop. How can I make a foreach in this?

return (
        <div className="container">
            <h1>We hebben nog <strong>{this.props.current}</strong> {this.props.name} zeecontainers over.</h1>

            <div className="progress">
                <div className={progressBarType} role="progressbar" aria-valuenow={progressBar} aria-valuemin="0" aria-valuemax="100" style={style}>
                    <span className="sr-only">{progressBar}% Complete (success)</span>
                </div>
            </div>
        </div>
    );

You should make the container a child component and leave the data fetch in the parent component. Then once you receive the data, do a foreach and pass the container data to it as props. — Chase DeAnda
– Chase DeAnda, Commented Oct 25, 2017 at 15:06
@ChaseDeAnda Thanks for your answer. Is it possible to type out a bit of it? Im fairly new to ReactJS and Laravel! — Mick D
– Mick D, Commented Oct 25, 2017 at 15:08

Chase DeAnda · Accepted Answer · 2017-10-25 15:18:22Z

2

You should make the container a child component and leave the data fetch in the parent component. Then once you receive the data, do a foreach and pass the container data to it as props.

const containers = [{name: 'Test', total: 95, current: 45},{name: 'Test 2', total: 95, current: 85},{name: 'Test 3', total: 25, current: 25}]

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      containers: []
    };
  }
  componentDidMount() {
    var self = this;
    //axios.get('http://reactlaravel.dev/container/count').then((response) => {
      
      // Mocking data call here
      this.setState({
        containers: containers //response.data
      });

          
      //})
  }
  render() {
    const containers = this.state.containers.map( (container, i) => <Container key={i} {...container} /> );

    return (
      <div>
        {containers}
      </div>
    )
  }
}

const Container = ({ name, total, current }) => (
  <div>
    <span>{name}</span>
    <span>{total}</span>
    <span>{current}</span>
  </div>
);

ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered Oct 25, 2017 at 15:18

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

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

2 Comments

Mick D Over a year ago

Thanks for the snippet. Is this the correct line, or does ...container needs to be something else? const containers = this.state.containers.map( (container, i) => <Container key={i} {...container} /> );

Chase DeAnda Over a year ago

Yes that's correct, it's called a spread operator. It's shorthand for setting each property of the container object as a prop on the <Container /> component. So it's shorthand for this: <Container name={container.name} total={container.total} current={container.current} />

Collectives™ on Stack Overflow

How to render a foreach with ReactJS in Laravel

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