score:0
start by reshaping your data. take the data list and turn it into a map of sensor ids to arrays of data (this has nothing to do with react, and should probably be done wherever the ajax response is initially handled); then in your sensors.map
, just pass sensordatatoid.get(sensor.id)
the reshaping could look like:
var sensordatatoid = new map();
for(var i = 0; i < data.length; i++) {
var datum = data[i];
var sensorid = datum.sensorid;
if (sensordatatoid.get(sensorid) === undefined) {
sensordatatoid.set(sensorid, []);
}
sensordatatoid.get(sensorid).push(datum)
}
update your setstate call to
_this.setstate({sensorsdata: sensordatatoid});
then your sensors.map
:
var rendersensors = () => {
return sensors.map((sensor) => {
return <sensor key={sensor.id} name={sensor.name} value={data.get(sensor.id)}/>
});
};
score:0
how about you iterate through one list and use the 'find' method to find the properties in the other.
var rendersensors = () => {
return(
sensors.map((sensor) => {
var dataitem = datalist.find((data)=>{
return (data.sensorid === sensor.id)
})
return(
<sensor key={dataitem.sensorid} name={sensor.name} value={dataitem.value} time={dataitem.time}/>)
})
)
};
Source: stackoverflow.com
Related Query
- Using the map function in react and parsing data down to child components
- How to add an image in the first react component and ignore in rest of the components using map function
- How to access data outside the function using axios and react js
- Assigning IDs to React components to add to state and map over in the render function
- React - How to pass props down for the .map function when using functional components
- How I should dispatch the action to fetch the data using react components and redux?
- How to display POST API data containing string using fetch and map function in React
- How to fix map is not function even there is already set data in the useState using React Hook
- React - get data from API and show in return using MAP function
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- How to render react components by using map and join?
- Finding the number of rendered child components in react test using enzyme?
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- How do you pass data when using the navigate function in react router v6
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- React refs when parent and child are function components
- Passing a function down multiple children components in React using ES6
- How to intercept back button in a React SPA using function components and React Router v5
- How to map inside map function and show the data in Reactjs
- How to send data from react and use the request body in express, using Axios?
- What is the best way to save my dynamicly created data using React and Javascript?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to add a legend to the map using react leaflet, without using refs and manually modifying the DOM?
- Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
- Cannot get rid of this comma on the bottom of html. I am using react and in the index.html I don't see it there or in any of my components
- React Dynamically download Components and get data from all child components
- Can I use mock data and proxy api data at the same time in my react project when using node express as a proxy server?
- How to bundle ES6 based React components and keep the bundle in ES6, using webpack?
- Render a table body in react using the map function
- Approach for different HTML structure with React and using the same components
More Query from same tag
- Styled components select previous sibling
- Type error Module '"react-leaflet"' has no exported member 'useEventHandlers'
- Override Material UI Button Text
- How to get access to webpack-dev-server with external IP
- How to prevent iOS Zoom on Ionic Alert input field
- How do I filter through an array of objects and have that value match a value of another array in React?
- How to fix the Rendered more hooks than during the previous render using react hook
- Material UI TextField Label Positioned Incorrectly
- Why does my modal not hide in react when I change my state from true to false?
- VS Code debugger config to debug React in Firefox
- Adding events from api to React Calendar
- Navigation with Material-UI Icons
- JSX vs Component reference as value type
- Material-ui makeStyles overwritten by default
- React-router not matching query string
- Dynamic Imports: Am I missing something?
- Next.js using getServerSideProps how do i pass props from page to components?
- Changing the state of a checkbox with setState
- How to render an array of elements whose attributes are in a nested array of objects?
- How to test a React component with multiple child components?
- React + typescript inheritance and extending property
- How do i fix createPortal in NextJS when using typescript?
- How to change color of specific elements in array
- How in Material UI to pass a props or a condition to a nested style method
- setResultState in React component is not defined
- Modify attributes of children in ReactJS component
- useEffect() cause re-renders and multiple requests to api
- Modal not showing proper video in react
- Close Persistent MUI Drawer on clicking outside
- Edit text value in React array using props and state?