How to show Form when button is clicked in react?-CodePudding

I am learning react and trying to create a car portal where on the basis of the availability of a car the user can book a car by clicking on the button. But when I click the button it shows the form for all available cars, how do I show the form only for the car whose button is clicked?.

Below is my App.js file

import React from "react";

const cars = [
  {
    id: 1,
    name: "Mruti",
    price: 5.2,
    available: false,
    rental_price: 5000,
    type: "Hatchback",
  },
  {
    id: 2,
    name: "Rnault",
    price: 5.2,
    available: true,
    rental_price: 3000,
    type: "SUV",
  },
  {
    id: 3,
    name: "Adi",
    price: 5.2,
    available: false,
    rental_price: 5000,
    type: "SUV",
  },
  {
    id: 4,
    name: "Hundai",
    price: 209,
    available: false,
    rental_price: 100000,
    type: "Luxury",
  },
  {
    id: 5,
    name: "Aton",
    price: 500,
    available: true,
    rental_price: 500000,
    type: "Luxury",
  },
  {
    id: 6,
    name: "Ercedes",
    price: 35,
    available: false,
    rental_price: 50000,
    type: "Sedan",
  },
  {
    id: 7,
    name: "BMW",
    price: 32,
    available: false,
    rental_price: 50000,
    type: "Hatchback",
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showForm: false };
  }

  showForm = () => {

    
    return (
      <div>
        <form id="add-app">
          <label>Price : </label>
          <input type="text" />

          <label> Hours : </label>
          <input type="text" />

          <button>Book</button>
        </form>
      </div>
    );
  };



  render() {

    
  
    return (
      <div className="product">
        {cars.map((car) => (
          <div class="product_info">
            <p key={car.id}>{car.name}</p>
            <p key={car.id}>{car.price}</p>
            <p key={car.id}>
              {car.available === true ? (
                <>
                  <p>Available</p>
                  <button
                    onClick={() => {
                      this.setState({showForm:true})
                    }}
                    
                  >
                    Rent car
                  </button>
                  {this.state.showForm ? this.showForm() : null}
                </>
              ) : (
                <p>Unavailable</p>
              )}
            </p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

CodePudding user response：

Instead of using a boolean state (this.setState({ showForm: true })) you might want to store the car object itself in state (this.setState({ car })).

Then you can check if the car in state is not null rather than checking if showForm is true, and your showForm() method can have access to the currently selected car through the state.

CodePudding user response：

This will work:

{this.state.showForm && (<this.showForm />)}

Btw, is there any specific reason you're using a functional component inside a class component?

If not I think it's inefficient to have it inside the App class since it'll be creating new showForm components for each App instance.