Rendering React Components from Array of Objects

Rendering React Components from Array of Objects

You can map the list of stations to ReactElements.

With React >= 16, it is possible to return multiple elements from the same component without needing an extra html element wrapper. Since 16.2, there is a new syntax <> to create fragments. If this does not work or is not supported by your IDE, you can use <React.Fragment> instead. Between 16.0 and 16.2, you can use a very simple polyfill for fragments.

Try the following

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div key={station.call} className='station'>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});
 
var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

Don't forget the key attribute!

https://jsfiddle.net/69z2wepo/14377/

How to render an array of objects in React?

You can do it in two ways:

First:

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

Second: Directly write the map function in the return

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

React state management rendering for one object or array of objects

Part 1:

As per the following definition:
React schedules a render every time the state of a component changes.
useState changes only the component where change occurs.
In your case, I believe, the re-render occurs.

Why re-invent the wheel when it's already invented?

If you are concerned about forms, you should explore this library:
https://react-hook-form.com/

Also, you will be able to properly visualize it in the section Isolate Re-renders of https://react-hook-form.com/

Part 2:

You can use useState to store an Array and that Array can be a set of Objects.

In order to render components from the Array, you can further use map function.

Or if you want to simply access the data, then you can use index values to access objects.

I hope, this makes sense.

Explanation could have been better if the whole code snippet for your concerns was shared.

Regards,
Shameel Uddin

Mapping over an array of objects to generate React components based on the key value pairs

try this

<Box>
        {array.map((project, projectIndex) => (
            <Box key={projectIndex}>
                {console.log(Object.entries(project))}
                <Typography
                    variant="subtitle1"
                    sx={{ fontWeight: 'bold', ml: 2 }}
                    value={Object.entries(project)[0][0]}>
                    {Object.entries(project)[0][0]}
                </Typography>
                {Object.entries(project)[0][1].map((ticket, ticketIndex) => (<MenuItem key={ticketIndex} sx={{ ml: 3 }} value={ticket}>{ticket}</MenuItem>))}
            </Box> 
        ))}
    </Box>

but if you have access to make changes in the backend I will recommend to save the data like this:

[
{
 "projectName": "Project 1"
    "tickets": [
        "Ticket 1",
        "Ticket 2",
        "Ticket 3",
    ]
},
{
  "projectName": "Project 2"
    "tickets": [
        "Ticket 4"
        "Ticket 5"
        "Ticket 6"
    ]
}

]

React - How to rerender only one component from an array of objects that is changing

Here's how you optimize it, first you use useCallback wrong, because every rerender the (e) => handleChange(e.checked) is a new instance, hence even if we memo the Child it will still rerender because props is always new.

So we need to useCallback to the function that invoke handleChange see my forked codesandbox

https://codesandbox.io/s/list-rerendering-forked-tlkwgh?file=/src/App.js

---

Related Topics