CODEWITHSUNDEEP
javascriptreactjsstatereact-props
Aquiles Bailo
Aquiles Bailo

Reputation: 121

React is not rendering the information when onClick event

I'm trying to update a div with info from another module. This is the file called Vehicles.js that needs to render the info: (I've omitted all the imports to save space)

class Vehicles extends React.Component{
  render(){
    if (this.props.oneVehicle == null) {
      return (
        <>
        <Card className="w-40 align-self-start">
            <Card.Body>
              <Card.Title>No Vehicle Selected</Card.Title>
              <Card.Text>
                Click a vehicle on the left to see more details
              </Card.Text>
            </Card.Body>
        </Card>
        </>
      )
    } else {
     let { manufacturer, model, fuel, type, color, vin} = this.props.oneVehicle
     return(
      <div style={{ display: 'block', width: 400, padding: 30 }}>
          <Card className="w-50 align-self-start">
            <Card.Img variant="top" src={`https://via.placeholder.com/180x150?text=${manufacturer}${model}`} />
              <Card.Body>
                  <Card.Title>{manufacturer} {model}</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">{vin}</Card.Subtitle>
                  <Card.Text>
                  This is a wonderful {fuel}-powered {color} {type}.
                  </Card.Text>
                  <Button>Buy Now!</Button>
              </Card.Body>
          </Card>
      </div>
     )
    }
  }
}

export default Vehicles

This is my app.js:
class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      vehicles: this.generateVehicles(),
      selected: null
    }

    this.handleVehicleSelected = this.handleVehicleSelected.bind(this)

  }

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

      return vehicles;
  }

  handleVehicleSelected(vehicle) {
    this.setState({ selected: vehicle })
  }

  render() {
    return (
    <Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
      <VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected} 
      selected={this.state.selected}/>
      <Vehicles />
    </Stack>
  );
}
}

export default App

And this is where the vehicles are generated:

class VehicleList extends React.Component {
  oneItem(vehicle) {
    return (
    <div style={{ display: 'block', width: 400 }}>
        <ListGroup>
        <ListGroup.Item action active={this.props.selected === vehicle} 
          onClick={this.props.onVehicleSelected.bind(this, vehicle)}>
          {vehicle.manufacturer} {vehicle.model}
        </ListGroup.Item>
        </ListGroup>
    </div>
    )
  }

  render(){
    return (
      <ListGroup>
        {this.props.vehicles.map((v) => this.oneItem(v))}
      </ListGroup>
  );
  }
}

export default VehicleList

Everything is working but the div update in the Vehicles.js section. Any hints how I can solve this?

Upvotes: 1

Views: 80

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

I think you forget to pass the prop oneVehicle to <Vehicles />

<Vehicles oneVehicle={this.state.selected}/>

That would help to re-render your Vehicles component with the selected vehicle

  render() {
    return (
    <Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
      <VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected} 
      selected={this.state.selected}/>
      <Vehicles oneVehicle={this.state.selected}/>
    </Stack>
  );

Upvotes: 1

Related Questions