Variable not defined in React-CodePudding

I'm trying to display the for loop result (i<10) but the message I get is that "vehicles" not defined. I've declared a variable as empty array and then used push to enter the results of the for loop. Any suggestions?

class VehicleList extends React.Component {
  constructor(props){
    super(props);
    let vehicles = []
  }

    vehicles(){
      for (let i = 0; i < 10; i  ) {
        vehicles.push({
          manufacturer: faker.vehicle.manufacturer(),
          model: faker.vehicle.model(),
          type: faker.vehicle.type(),
          fuel: faker.vehicle.fuel(),
          vin: faker.vehicle.vin(),
          color: faker.vehicle.color()
        })
      }
      return <div>{vehicles}</div>
    }

  generateVehicle(){
    let manufacturer = faker.vehicle.manufacturer()
    return{
      manufacturerN : manufacturer
    }
  }

   render(){
   return (
    <div style={{ display: 'block', width: 400, padding: 30 }}>
        <ListGroup>
          <div>{vehicles}</div>
        </ListGroup>

   </div>
  );
}
}

export default VehicleList

CodePudding user response：

I'll give you two potential solutions:

First, try adding this to the front of the vehicles call. Ergo it will look like this.vehicle.append(). You may also need to add this to the front of the declaration ergo let this.vehicle = [].

If that doesn't solve the issue try using a react state instead. this.state = {vehicles: []}; and then call it with {this.state.vehicle.append()} see https://www.w3schools.com/react/react_state.asp

CodePudding user response：

I see multiple issues in your code. But all fixable!

First off, use the this keyword to instantiate the vehicles instance in the constructor, so you can access it throughout the component.

constructor(props) {
    super(props);
    this.vehicles = [];
}

Next, in your vehicles() method, reference the vehicles array using this keyword.

vehicles() {
    for (let i = 0; i < 10; i  ) {
      this.vehicles.push({
        // add vechiles 
      });
    }
  }

Returning <div>{vehicles}</div> might not be appropriate, since vehicles is an array. You should iterate through its elements instead to add them to DOM.

But you might not need to return anything here since you can access vehicles directly in render() (as shown below).

We first update vehicles by calling the vehicles() method and then iterate through each vehicle to add it to the DOM.

render() {
    // update vechiles
    this.vehicles();
    // render vehciles
    return (
      <div style={{ display: "block", width: 400, padding: 30 }}>
        <ListGroup>
          {this.vehicles.map((vehicle) => (
            <div>{vehicle}</div>
          ))}
        </ListGroup>
      </div>
    );
  }

If you'd like this to be re-rendered anytime vehicles change, you can store the vehicles in the state.

Lastly, in your code you're referencing faker. If it is something stored in your props, don't forget to extract it from props first (constructor could be a good place for it), or reference it everywhere with the props keyword (props.faker or props.faker[0] if it's an array).