I'm having trouble populating a Material UI Drop down with JSON Data. Can someone help me identify the issue? Below is the code snippet that contains the JSON data and the relevant code.
const json = { ResponseMetadata: { RequestId: "1B29B45E145594A7", HostId: "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=", HTTPStatusCode: 200, HTTPHeaders: { "x-amz-id-2": "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=", "x-amz-request-id": "1B29B45E145594A7", date: "Sun, 13 May 2018 20:36:02 GMT", "content-type": "application/xml", "transfer-encoding": "chunked", server: "AmazonS3" }, RetryAttempts: 0 }, Buckets: [ { Name: "eladft-1-653237860766", CreationDate: "2014-09-01T16:58:41Z" }, { Name: "elasticdf37860766", CreationDate: "2015-10-06T00:24:57Z" }, { Name: "elasticdf0766", CreationDate: "2015-10-02T17:37:19Z" } ], Owner: { DisplayName: "dfdf", ID: "b4bf8bde7571756284e067071dfe442c7b014a09f012a1179" } };
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="bucketName-simple">Buckets</InputLabel>
<Select
native="true"
value={this.state.json.Buckets.Name}
onChange={this.handleChange}
inputProps={{
name: "v_bucketName",
id: "age-simple"
}}
>
{this.state.json.Buckets.map((Buckets, i) => (
<MenuItem native="true" key={i} value={Buckets.Name}>
{Buckets.Name}
</MenuItem>
))}
)}
</Select>
</FormControl>
</form>
);
}
}
The data is retrieved from AWS S3 and the code is implemented using Material-UI and React JS.
Code Sanbox