Suppose I have weekly schedule data stored in the map

I need to access this map and display the schedule day wise in React

const WeekSchedule =  { Monday : [ { event: meeting, priority: 1 },
                                { event: lunch, priority: 2 }
                              ],

                        Tuesday : [ { event: meeting, priority: 3 },
                                { event: lunch, priority: 4 }
                              ],
                        }

CodePudding user response：

const weekSchedule = {
  Monday: [
    { event: "meeting", priority: 1 },
    { event: "lunch", priority: 2 }
  ],
  Tuesday: [
    { event: "meeting", priority: 3 },
    { event: "lunch", priority: 4 }
  ],
  Wednesday: [
    { event: "meeting", priority: 1 },
    { event: "lunch", priority: 2 }
  ]
};

const days = ["Monday", "Tuesday", "Wednesday"]; // or const days = Object.keys(weekSchedule)

export default function App() {
  return (
    <div className="App">
      {days.map((day) => {
        return (
          weekSchedule[day] &&
          weekSchedule[day].length > 0 && (
            <div key={day} className="day-item">
              <div className="day-name">{day}</div>
              {weekSchedule[day]
                .sort(function (a, b) {
                  return a.priority - b.priority;
                })
                .map((item) => (
                  <div
                    key={item.event   item.priority}
                    className="event-item"
                  >
                    {item.event}
                  </div>
                ))}
            </div>
          )
        );
      })}
    </div>
  );
}

whole code: https://codesandbox.io/s/ecstatic-resonance-i6gjud?file=/src/App.js:30-42

If you can change WeekSchedule to Array, the code will be more simple.

like

const weekSchedule2 = [{
  name: 'Monday',
  events: [
    { event: "meeting", priority: 1 },
    { event: "lunch", priority: 2 }
  ]
}, {
  name: 'Tuesday',
  events: [
    { event: "meeting", priority: 3 },
    { event: "lunch", priority: 4 }
  ]
}]

CodePudding user response：

This is a fairly straightforward thing to do (display an object / map using ReactJS). Provided below may be one possible solution to achieve the desired objective.

Code Snippet

const {useState} = React;

const WeekScheduleDisplay = ({data, ...props}) => {
  const tableHeader = ['Day of Week', 'Events (& priority)'];
  return (
    <div class='outer'>
      <table>
        <thead>
        {
          data && tableHeader.map(
            el => (<th class='bottBorder'>{el}</th>)
          )
        }
        </thead>
        <tbody>
        {
          data && Object.entries(data).map(
            ([k, v]) => (
              <tr>
                <td>{k}</td>
                <td>
                {
                  v.map(
                    ({event, priority}) => (`${event} (${priority})`)
                  ).join(', ')
                }
                </td>
              </tr>
            )
          )
        }
        </tbody>
      </table>
    </div>
  );
};

const rawData = {
  'Monday': [{
      event: 'meeting',
      priority: 1
    },
    {
      event: 'lunch',
      priority: 2
    }
  ],
  'Tuesday': [{
      event: 'meeting',
      priority: 3
    },
    {
      event: 'lunch',
      priority: 4
    }
  ]
};


ReactDOM.render(
  <div>
    <h2>DEMO - Display Weekly Schedule</h2>
    <WeekScheduleDisplay data={rawData} />
  </div>,
  document.getElementById('rd')
);

.outer {
  border: 2px solid black;
  width: fit-content;
  padding: 5px 10px;
 }
 
 .bottBorder { border-bottom: 2px solid black; }

<div id='rd' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

Explanation

• The data is passed to a component via props
• The header for a tabular display is hardcoded & rendered
• Using Object.entries, the data is iterated
• The key (ie, day-of-week) is rendered first
• Next, the events are .join-ed into a comma-separated string and rendered on the same row as the key