React selecting option with object as attribute value

Question

I have an issue with react when I want to change the selected option. The problem is that the value is an object and I can\'t pass it in option value attribut.

See t

Answer 1

Try this following code,

import React from 'react';

class LocationDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchLoc: undefined,
            selectedLoc: "",
            locs:[
                {"name" : "Kerala","districts":["Ernakulam", "Trivandrum"]},
                {"name" :"Tamil Nadu","districts" :["Palani","Tiruchi"]}
            ],
        };
        this.handleChangeLocation = this.handleChangeLocation.bind(this);
    }


    handleChangeLocation = (event) => {
        this.setState({ selectedLoc: event, searchLoc: event.target.value }
            , () => console.log("searchLoc", this.state.searchLoc));
    }

    render() {
        return (
             obj.value === this.state.selectedLoc)}
                required
            >
                {
                    this.state.locs.map(loc => {
                        return (
                            {loc.name}
                        )
                    })
                }
            

        );
    }
}

export default LocationDemo;