Show hide content onClick in react JS

Question

A have an array objects in React JS and I want to loop through it.

My code is as follows :

let data = [
    {make: "Volkswagen", models: ["Golf", "Passat", "Polo", "Tiguan"]},
    {make: "Skoda", models: ["Fabia", "Octavia", "Superb"]},
    {make: "Audi", models: ["A1", "A3", "A5", "Q3", "Q5"]}
];    

export default class makeModel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            make: null
        }
    }

    handleMake(event){
        event.preventDefault();
        this.setState({make: event.target.name, show: !this.state.show});
    }

    render() {
        const language = this.props.language;
        let style = {display: "none"};

        if(this.state.show) style = {display: "block"};
        return (
            <div>
                <div className="priceTitle">{language.makeAndModel}</div>
                {data.map( (car, i) => {
                    return (
                        <div key={i} className="makeModel">
                            <Link to="/" className="make" name={car.make} onClick={this.handleMake.bind(this)}>{car.make}</Link>
                            <div className="models" style={style}>
                                {car.models.map((m, i) => {
                                    if(car.models.indexOf(m) > -1 && car.make === this.state.make){
                                        return <div key={i}>{m}</div>
                                    }
                                })}
                            </div>
                        </div>
                    )
                })}
            </div>
        );
    }
}

I want to show the list of all makes. And then on click I want to show than all models of that make.

My code works. But onClick there are all three divs with class models shown. But only in the clicked one the models are shown. How to hide all those div's with class model and show only the clicked one?

And generally, is there any better way to do it?

Answer 1

Try this :

import React from 'react';

let data = [
{make: "Volkswagen", models: ["Golf", "Passat", "Polo", "Tiguan"]},
{make: "Skoda", models: ["Fabia", "Octavia", "Superb"]},
{make: "Audi", models: ["A1", "A3", "A5", "Q3", "Q5"]}
];

const ModelLink = ({models,make,handleMake,isDisplay}) => {

const modelList = isDisplay ? models.map((m, i) =>  <div key={i}>{m}</div>) : "";

return (
     <div className="makeModel">
            <h3 to="/" className="make" name={make} onClick={handleMake}>{make}</h3>
            <div className="models" >
                {modelList}
            </div>
     </div>
)

}

export default class makeModel extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        selectedMake: null
    }
}

handleMake(event,name){
    event.preventDefault();

    const nextMake = this.state.selectedMake !== name ? name : null;

    this.setState({selectedMake: nextMake});
}

render() {
    const {selectedMake} = this.state;
    return (
        <div>
            {data.map((car, i) => {
                return (
                    <ModelLink key={i} 
                            models={car.models} 
                            make={car.make} 
                            isDisplay={car.make === selectedMake} 
                            handleMake={(e) => this.handleMake(e,car.make)} 
                    />
                )
            })}
        </div>
    );
}
}