map to dropdown if condition is met reactjs - reactjs

Question

I want to populate dropdowns only if the a certain condition is met.
I am using the axios get method for fetching data.
The code is as follows -
componentDidMount = e => {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then(function (res) {
let FullData = res.data;
});
};
My form is as follows-
<form>
<select>address</select>
<option id={FullData.zipcode}>{FullData.street}</option>
</form>
I need this to work only if the { FullData.city } is "Gwenborough".
Please refer here for the JSON.

Answer 1

Here's a way to do it. You generally need to put your values in state, so whenever they are received in asynchronous way, the component gets updated.
Here's a Demo sandbox
class DropDown extends React.Component {
constructor(props) {
super(props);
this.state = {
FullData: [],
}
}
componentDidMount=(e)=>{
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(res => {
this.setState({
FullData: res
})
})
}
render() {
let { FullData } = this.state;
return (
<form>
<label>Address </label>
<select>
{FullData
.filter(user => user.address.city === "Gwenborough")
.map(user => {
return <option key={user.id} id={user.zipcode}>{user.address.street}</option>
})}
</select>
</form>
);
}
}
Note I was using fetch instead of axios.
Another note - I really like Dexter's answer and the way the action is put into separate function. It looks like a better approach to structuring your code in general. It probably wouldn't work as it is only because of how your data is structured: you get and array of users and you only have city and street inside the address key. Cheers!

Answer 2

Something like this can help. Note your question isn't clear enough to provide working examples to help me understand the full scope of what you're talking about, so this is my best guess on the solution to your question.
constructor(){
this.selection=null;
this.doSomeTesting=this.doSomeTesting.bind(this);
}
doSomeTesting(FullData){
if(FullData.city === "Gwenborough"){
return (<option id={FullData.zipcode}>{FullData.street}</option>);
}
return ""; //return nothing useful if not what you're looking for
}
componentDidMount=(e)=>{
axios.get('https://jsonplaceholder.typicode.com/users')
.then(function(res){
let FullData=res.data
this.selection = this.doSomeTesting(FullData);
})
}
render(){
<form>
<select>address</select>
{this.selection}
</form>
}