How to dynamically create Menu Items from json in reactjs?

Question

I'm new to Material UI and everything in the examples is static. Is there something to see for a JSON example?

replace that static part with a loop on json and create the menu elements dynamically, like this: [values here].map(el => <Menu />) — Mayank Shukla
– Mayank Shukla, Commented May 13, 2018 at 13:07
Thanks. this is helpful. I'm still new to it..do you have some more detailed example? — Axwack
– Axwack, Commented May 13, 2018 at 15:43
can you post the json from which you want to create menu items? — Mayank Shukla
– Mayank Shukla, Commented May 13, 2018 at 15:46
{"ResponseMetadata": {"RequestId": "6220D8E", "HostId": "6IrP0tqhAIShLt2zsCode": 200, "HTTPHeaders": {"x-amz-id-2": "6IrP0tqhx/nDOH0p4=", "x-amz-request-id": "62AC918E", "date": "Sun, 13 May 2018 17:19:44 GMT", "content-type": "application/xml", "transfer-encoding": "chunked", "server": "AmazonS3"}, "RetryAttempts": 0}, "Buckets": [{"Name": "elasticb-east-1-6532860766", "CreationDate": "2014-09-01T16:58:41Z"}, {"Name": "elasticbeanstalk-860766", "CreationDate": "2015-10-06T00:24:57Z"}, {"Name": "elasticbeansta", "CreationDate": "2015-10-02T17:37:19Z"}], "Owner": {"DisplayName": "", "ID": "b4bf — Axwack
– Axwack, Commented May 13, 2018 at 17:21

Mayank Shukla · Accepted Answer · 2018-05-13 18:20:03Z

1

Write it like this:

"Buckets": [
    {"Name": "elasticb-east-1-6532860766", "CreationDate": "2014-09-01T16:58:41Z"},
    {"Name": "elasticbeanstalk-860766", "CreationDate": "2015-10-06T00:24:57Z"},
    {"Name": "elasticbeansta", "CreationDate": "2015-10-02T17:37:19Z"}
]

<Menu>
    {
        this.state.Buckets.map((el,i) => (<MenuItem key={i} primaryText={el.Name} />))
    }
</Menu>

Assuming you will store the bucket values in the state variable.

answered May 13, 2018 at 18:20

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Axwack Over a year ago

Thank you. I will try it and let you know.

Axwack Over a year ago

How does react know to make this iteration in HTML?

Mayank Shukla Over a year ago

we don't write html with react, its jsx :), there we can write js in {}, i will suggest to check doc first, you will get answer of all your doubts. Doc

Mayank Shukla Over a year ago

let me know if you have any doubt after that :)

Collectives™ on Stack Overflow

How to dynamically create Menu Items from json in reactjs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related