score:1
consider what a table looks like when you need to render it. first, you need to "make rows" and then inside each row, you need to "make columns". since you're only doing one week, it pretty much gives you the first task for free, there is only one row.
as for the second part, rendering columns, you need to prepare your data better. organize the events by the day of when they are happening. i will take this as a simple task with events only being on one specific date as you posted, if you wanted events to span multiple days, the code would obviously be different.
first, imaging what is the desired output:
var events = {
[date]: [eventname, eventname, eventname],
[date]: [eventname],
[date]: [],
}
this shows a structure were a day can hero zero, one or more events happening. it's also possible to use undefined
instead of []
for the "zero" case. this allows you to easily render:
{week.map((wk) => (
<td key={wk}>
{events[wk] ? events[wk].join(', ') : null}
</td>
)}
now, what this does is that when rending a day of the week, it prints a list of events into that cell, if there are any. this is simplified for sure, but it shows what to do.
finally, you need to modify your data to match the final data:
var events = [
{
date: moment("14-03-2022", "dd-mm-yyyy").format("ddd d mmm yyyy"),
name: "event monday 13 2022"
},
{
date: moment("16-03-2022", "dd-mm-yyyy").format("ddd d mmm yyyy"),
name: "event wednesday 2022"
}
];
var eventsmapped = {}
var event
for (event of events) {
if (!eventsmapped[event.date]) {
eventsmapped[event.date] = []
}
eventsmapped[event.date].push(event.name)
}
you can simply do this inside the render function. for small arrays, it should be fine. if you get a lot of events, you can consider optimizing it later.
then you can use eventsmapped
to render where it was events
above.
Source: stackoverflow.com
Related Query
- Beginner : Loop with condition in table reactJS
- Render Table <tr> tag based on condition in ReactJs within map loop
- How to display json data with ReactJs as table
- Reactjs unexpected infinite loop with render
- How to use reduce() instead a traditional foreach loop with ReactJs app
- How to make carousel auto change instead of click onclick with loop on ReactJs
- Creating button with Loop ReactJS
- Is there any way we can export the Antd table data into an excel sheet on button click with reactjs
- Loop video with hover ReactJS
- Creating collapsible table cells with Bootstrap 4 and ReactJS
- map function loop when rendering with ReactJS and concat JSX syntax
- Display mongoDB data in a table with most recent date at the top of list in ReactJS
- Slice method with condition within loop in React
- Handle button click with two different handler in different condition - ReactJS
- reactjs for loop is stopping at 1 for some reason and issue with trying to use set state in a loop
- How to display a list of items from a reactjs map loop horizontally with wrap?
- How to use the reactJS to append DOM elements with loop
- How to filter table rows with search bar in Reactjs
- How to render object data to table with Reactjs
- ReactJS - Which Component LifeCycle method should be used to create table and populate with data after AJAX call
- Append html to state variable in ReactJS with ternary condition
- Dynamically add cells to table rows and dynamically create table rows with reactjs
- reactjs running for loop with json data
- .map() function and deleting a row from a table with ReactJS
- ReactJS - Loop with map function not rendering view
- JS loop for with condition getting 0 on javascript
- Infinity Loop with promises and state variables in ReactJs
- Infinite Loop with useEffect - ReactJS
- Fill a reactjs map with json objects from request response inside for loop
- Render a table with an if condition in react
More Query from same tag
- Ternary Operator in JSX - Alternative?
- skip passing props in jsx
- How to merge different node modules and make different bundles from them?
- Cancelling previous async action using redux-thunk
- React, Fetch API & Filtering data
- check if login was successful?
- Adding a CSS class to a JSX in ReactJS
- How to parse a small subset of Markdown into React components?
- ./components/Avatar.tsx Error: Cannot find module '@babel/preset-stage-0'
- How to send files from client to http node server
- How to import in nodejs
- React App unable to deploy on AWS Amplify
- Can a React prop type be defined recursively?
- How to use import global sass variables with create-react-app (ejected)
- React-bootstrap Modal is not working with image content while scaling for mobile display compatible
- disable react css transition group on certain events
- React - avoid dropdown to close when you develop the accordion inside the dropdown
- Newly added items to list do not get _id key prop added until hard refresh
- React Search filter function
- How to make dependent fetch API calls in Next.js
- React Warning, setState(...) in ComponentDidMount
- How can I import svg logo inside react component?
- Dynamically import all component sub directories without using full path
- React component with react-router inside an app with react-router
- How can I pass an 'e || evt || event' to a nested function
- Why does eval() not work for imported functions?
- Login using Azure Authentication in a React app
- React Native can console log state variable, but can't render it
- React/Redux export default connect() doesn't seem to be connected to Provider
- How to style mui-rte CodeBlock