score:2

Accepted answer
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>
    );
}
}

Related Query

More Query from same tag