How to map a json file containing different attributes of an address into different react select lists ?
So first, you need to create the select handler , then map the data in the functions "ComponentWillMount" and "ComponentWillReceiveProps" then add the select input with the mapped options.
For help you can dm me.
JSON File Those are few line from the json file I worked on. [ {"id":"1","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Borj Turki 2","codePostal":"2058"}, {"id":"2","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"El Menzah 8","codePostal":"2037"}, {"id":"3","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Du Printemps","codePostal":"2080"}, {"id":"4","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Des Roses","codePostal":"2080"}, {"id":"5","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Residence Ennour ( Naser 2)","codePostal":"2037"}, {"id":"6","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"El Menzah 6","codePostal":"2091"}, {"id":"7","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Ennasr 1","codePostal":"2037"}, ]
Select Handler
SelectgouvernoratHandler = (selectedOptions) => {
const gouvernorat = selectedOptions;
this.setState({ gouvernorat: gouvernorat.label });
};
SelectDelegationHandler = (selectedOptions) => {
const del = selectedOptions;
this.setState({ delegation: del.value.delegation });
};
SelectLocaliteHandler = (selectedOptions) => {
const localite = selectedOptions;
this.setState({ localite: localite.value.localite });
};
SelectCodePostalHandler = (selectedOptions) => {
const codePostal = selectedOptions;
this.setState({ codePostal: codePostal.value.codePostal });
};
Unique object function
getUnique(arr, index) {
const unique = arr
.map(e => e[index])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter(e => arr[e]).map(e => arr[e]);
return unique;
}
ComponentWillMount
const gouvernoratData = [];
const gouvernoratS = [...Adresse];
gouvernoratS.map((ad)=>{
return gouvernoratData.push({
value : ad.gouvernorat,
label: ad.gouvernorat
})
})
this.setState({gouvernoratS: gouvernoratData })
const LocaliteData = [];
const localiteS = [...Adresse];
localiteS.map((ad)=>{
return LocaliteData.push({
value : ad,
label: ad.localite
})
})
this.setState({localiteS: LocaliteData })
const delegationData = [];
const delegationS = [...Adresse];
delegationS.map((ad)=>{
return delegationData.push({
value : ad,
label: ad.delegation
})
})
this.setState({delegationS: delegationData })
const CodePostalData = [];
const codePostalS = [...Adresse];
codePostalS.map((ad)=>{
return CodePostalData.push({
value : ad,
label: ad.codePostal
})
})
this.setState({codePostalS: CodePostalData })
ComponentWillRecieveProps
//gouvernorat
if (this.state.gouvernoratS) {
const mappedGouv = this.state.gouvernoratS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ gouvernorat: mappedGouv });
}
//delegation
if (this.state.delegationS) {
const mappedDel = this.state.delegationS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ delegation: mappedDel });
}
///localite
if (this.state.localiteS) {
const mappedLoc = this.state.localiteS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ localite: mappedLoc });
}
//code postal
if (this.state.codePostalS) {
const mappedCP = this.state.codePostalS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ codePostal: mappedCP });
}
React balises
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
gouvernorat
</label>
<Select
name="gouvernorat"
options={this.getUnique(this.state.gouvernoratS,'label')}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectgouvernoratHandler.bind(this)}
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Délégation
</label>
<Select
name="delegation"
options={this.getUnique(this.state.delegationS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
),'label')}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectDelegationHandler.bind(this)}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Localité
</label>
<Select
name="localite"
options={this.state.localiteS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
&& del.value.delegation === this.state.delegation
)}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectLocaliteHandler.bind(this)}
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Code postal
</label>
<Select
name="codePostal"
options={this.state.codePostalS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
&& del.value.delegation === this.state.delegation
&& del.value.localite === this.state.localite
)}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectCodePostalHandler.bind(this)}
/>
</FormGroup>
</Col>
</Row>
<Row>