CODEWITHSUNDEEP
javascriptreactjsfrontend
Aquiles Bailo
Aquiles Bailo

Reputation: 121

Generate an array in React using specific code

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.

Upvotes: 0

Views: 141

Answers (1)

Steffen Frank
Steffen Frank

Reputation: 1797

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

  // ...

}

Upvotes: 1

Related Questions