React is not showing anything on the screen

I was using function instead of class and the code was working up to certain extent, now it is not displaying at all.

In my VehiclesList.js I generate 10 random vehicles, code below:

import React from 'react'
import {faker} from '@faker-js/faker'
import ListGroup from 'react-bootstrap/ListGroup';
import Vehicles from './Vehicles';

class VehicleList extends React.Component {
  constructor(props){
    super(props);
    this.manufacturer = this.faker.vehicle.manufacturer().bind(this)
  }

   render(){
   return (
    <div style={{ display: 'block', width: 400, padding: 30 }}>
        <ListGroup>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
        <ListGroup.Item>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</ListGroup.Item>
      </ListGroup>
    </div>
  );
}
}

export default VehicleList

In my vehicle.js I have to show the info of the clicked vehicle, react is not showing anything on the screen and I’m lost at this point.

The code below:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Card, Button} from 'react-bootstrap';
import VehicleList from './VehicleList';
import {faker} from '@faker-js/faker'
import ListGroup from 'react-bootstrap/ListGroup';

class Vehicles extends React.Component{
  constructor(props){
    super(props);
    this.manufacturer = this.faker.vehicle.manufacturer().bind(this)
  }
  render(){
  return(
<div>
<Card className="text-center">
  <Card.Body>
    <Card.Title>No Vehicle Selected</Card.Title>
    <Card.Text>
      Click a vehicle to see more details
    </Card.Text>
  </Card.Body>
  </Card>
<br></br>
  <Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src={`https://via.placeholder.com/180x150?text=${faker.vehicle.manufacturer()}
     ${faker.vehicle.model()}`} />
    <Card.Body>
    <Card.Title>{faker.vehicle.manufacturer()} {faker.vehicle.model()}</Card.Title>
      <Card.Text>
      This is a wonderful {faker.vehicle.fuel()}-powered {faker.vehicle.color()} {faker.vehicle.type()}.
      </Card.Text>
      <Button variant="primary">Buy now!</Button>
    </Card.Body>
</Card>
</div>
)
}
}


export default Vehicles

I really appreciate any help with this. Thanks!

Answer

Change line in your constructor to this.manufacturer = this.faker.vehicle.manufacturer.bind(this);

Or remove it entirely, you aren’t referencing this.manufacturer in your code anyways.

Advertisement

Answer