Generate an array in React using specific code

Question

I need to generate an array of 10 items and this is the code I have to use.

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()
  })
}

My question is how do I use it? So far I have this:

import React from 'react';
import Stack from 'react-bootstrap/Stack'
import VehicleActions from './VehicleActions';
import VehicleList from './VehicleList';
import Vehicle from './Vehicle';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { vehicles: [] };
    this.onNewContact = this.onNewContact.bind(this);
    this.handleContactSelected = this.handleContactSelected.bind(this)
    this.handleDeleteContact = this.handleDeleteContact.bind(this)
    
  }

  onNewContact(vehicle) {
    this.setState((state) => {
      return {
        vehicles: state.vehicles.concat(vehicle)
      }
    })
  }

  handleContactSelected(manufacturer) {
    this.setState((state) => {
      return {
        selected: manufacturer
      }
    })
  }
  
  handleDeleteContact(manufacturer) {
    this.setState((state) => {
      return {
        vehicles: state.vehicles.filter((vehicle) => vehicle.manufacturer !== manufacturer),
        selected: null
      }
    })
  }

  handleGenerateVehicle() {
    this.props.onNewContact(this.generateContact())
  }

  render() {
    return (
      
      <Stack gap={3} className="col-md-10 mx-auto">
        <VehicleActions onNewContact={this.onNewContact}
                        selectedContact={this.state.selected} />
        <Vehicle />
        <VehicleList vehicles={this.state.vehicles}
        onContactSelected = {this.handleContactSelected}/>
      </Stack>
      
    )
  }
}

export default App

I'm using the "npm install react-bootstrap bootstrap @faker-js/faker" to generate the random text, I have tested it in the alert or console log and it works, but I have no clue where to insert it so the 10 values are shown in a column.

Steffen Frank · Accepted Answer · 2022-06-20 01:12:00Z

1

If you want to hardcode the list of vehicles (I assume that is what you are supposed to do), just put the code in the constructor:

class App extends React.Component {
  constructor(props) {
    super(props);
    let 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()
      })
    }
    this.state = { vehicles };
    this.onNewContact = this.onNewContact.bind(this);
    this.handleContactSelected = this.handleContactSelected.bind(this)
    this.handleDeleteContact = this.handleDeleteContact.bind(this) 
  }

  // ...

}

answered Jun 20, 2022 at 1:12

Steffen Frank

1,9179 silver badges17 bronze badges

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

1 Comment

Aquiles Bailo Over a year ago

Thanks for answering! I did it and now it says "faker is not defined" in every single line. I declared it in another file and imported it. generateVehicle() { let manufacturer = faker.vehicle.manufacturer() let model = faker.vehicle.model() let type = faker.vehicle.type() let fuel = faker.vehicle.fuel() let vin = faker.vehicle.vin() let color = faker.vehicle.color() return { manufacturerN: manufacturer, modelN: model, typeN: type, fuelN: fuel, vinN : vin, colorN: color }

Collectives™ on Stack Overflow

Generate an array in React using specific code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related