score:2
Original Solution:
Do you need to reset your zoom level after you exit the edit mode? Your logic is very tightly coupled between mapCenterPoint
and the if(zoomLevel...
portion of plotMarker
. I'm wondering if you may have a state that is causing this to always evaluate true after editing (and until manually zooming): props.plots && (props.selectedPlot || props.plotBeingEdited)
Thoughts on Refactoring:
to figure out a more elegant way
Option 1: HOCs
Higher Order Components (or HOCs) might be a great approach for this. You have an example of a HOC already in your code:
export default connect(mapStateToProps, actions)(PlotMarker);
HOCs are really just functions that return something useful to you in the React world. As such, they're a great form of code reuse. connect
is a HOC that returns a function in this scenario, but HOCs are often used to return components. So you may have a HOC like plotMarker(zoomLevel, beingEdited)
that performs the logic itself to determine which type of marker component to render.
Check out React's Higher Order Component Documentation for more.
Option 2: Single Return Statement
I've always been a fan of using a single return statement for the render method. I haven't dug in super deep to how React handles diffs, but I'm pretty sure from my experience that it responds better this way - so it might remove the need for you to twitch the zoom levels to reset it.
How I would perform all of PlotMarker
's logic inside one return:
export class PlotMarker extends Component{
render(){
const {
id,
name,
geoJSON,
zoomLevel,
selectedPlot,
plotBeingEdited
} = this.props;
const markerPosition = position(geoJSON);
let style = () =>{
return {
color: 'blue'
};
};
if(selectedPlot === id){
style = () =>{
return {
color: 'red'
};
};
}
return (
<div>
{
zoomLevel > 14 && plotBeingEdited === id &&
<PlotPolygon id={id} geoJSON={geoJSON}/> ||
zoomLevel > 14 &&
<GeoJSON
id={id}
data={geoJSON}
style={style}
onClick={() =>{
this.props.selectPlot(id);
}}
/> ||
<Marker
id={id}
className="marker"
position={markerPosition}
onClick={() => {
this.props.selectPlot(id);
}}>
<Popup>
<span>{name}</span>
</Popup>
</Marker>
}
</div>
);
}
}
Source: stackoverflow.com
Related Query
- React Redux-a child component does not re-render on state change
- React component does not update with the change in redux state
- React function component parent state change does not re-render child component
- React functional component state change does not trigger child component to re-read its props
- React Child Component Not Updating After Parent State Change
- react component state change after ajax call but does not rerender component
- React child component not re-rendering on parent state change
- Component does not rerender but redux state has changed via react hooks
- Change in redux state does not cause change in component / componentDidUpdate not called
- React child component do not re-render on it state change
- React child component not re-rendering on state change
- react stateless child components do not update on state change in parent component
- Why does react component do not re render after changing state
- React - State change of parent does not cause re-rendering of child when passed down as props?
- Component does not render based on state change in react-redux
- React change state from child component not working
- React component not detecting change in redux state
- React change component state in a fetch, leads to Object not valid as a React child error
- State change not reflecting on child component in react
- State variable of react component does not change after fetch
- React Child component does not rerender on prop change
- react render state child component vars not updated?
- React - Redux component not displaying array.length correctly despite component being rerendered on state change without mutating the state
- React redux and React router,link change does not re render view
- Parent React component not re-rendering on change state in child using react hooks;
- React Redux component not re-rendering on state change
- react redux does not return updated state when component load
- React parent component state updates but child does not re-render
- React Component Does not Always Rerender After State Change
- Redux reducer does not force a rerender on my React Component although I mutated the state
More Query from same tag
- React Apex Charts Won't Resize
- ant design table with dynamic children columns
- escaping html tags in meteor react
- React-redux shows error missing class propertises transform
- How to update select items based on the selection from the first select items using react
- Updating image source on scroll using pure javascript
- Incrementing counter for each item in a newsfeed
- How to show multiple loading Skeleton screen on looping array in react using material ui Skeleton component?
- API Integration with Axios - Username and Password PopUp Showing Up
- React: store state to template literals
- Rerender React component when props change?
- React setState doesn't update
- How to Disable button Of an Item In an array onClick React
- Material UI Chip cross button / delete button not working
- Ignore empty object
- useRef hook for dynamic "onOutsideClick"?
- Adding custom styles to the react-styleguidist library
- React/DC.js - Chart Resizing (based on window size)
- React - Create multiple useRefs in one line using object or array
- Meteor/React, redirect route after changeState
- Combining graphs in highcharts
- How to return base64 data from a fetch promise?
- React.js + bootstrap-table working only on first load, but transitions break the table
- In JS ES6, why is it that if I export default, then I cannot export it individually?
- Replace a "Tag" ( string ) with all the matches in JavaScript
- Render array of objects from Redux store as React components
- React-select multi select update a prop when no value is selected
- How to create a nested menu in JavaScript?
- Adding CSS to react Component
- Axios put return undefined [React JS + Axios]