I've got a parent component call "RiskMatrix.js" that looks as follows:
export default function RiskMatrix({disable}) {
const dispatch = useDispatch();
const [risk_matrix, setRiskMatrix] = React.useState(useSelector((state) => state.riskMatrix.risk_matrix));
if (disable == true) {
return (
<TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
{console.log(risk_matrix)}
<Table size="small" sx={{ minWidth: 200 }}>
<TableHead>
<TableRow>
<TableCell align="center" width="90"></TableCell>
{consequences_description.map((description) => (
<TableCell align="center" width="90">{description}</TableCell>
)
)}
</TableRow>
</TableHead>
<TableBody>
{risk_matrix.map((row, row_index) => (
<TableRow
key={row_index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{likelyhood_description[row_index]}
</TableCell>
{row.map( (column, column_index) => (
<TableCell align="center">
<ToggleButton
risk={column}
row_index={row_index}
column_index={column_index}
/>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
} else {
return null
}
}
I want this component to re-render when the child ("ToggleButton") components onClick function is called, the child component looks as follows:
export default function ToggleButton({risk, row_index, column_index}) {
const handleColor = () => {
switch (risk){
case "L":
return "low"
case "M":
return "moderate"
case "H":
return "high"
case "E":
return "extreme"
default:
break;
}
};
const dispatch = useDispatch();
const { updateMatrix} = bindActionCreators(actions, dispatch)
const handleOnClick = () => {
switch (risk){
case "L":
updateMatrix(row_index, column_index, "M")
break;
case "M":
updateMatrix(row_index, column_index, "H")
break;
case "H":
updateMatrix(row_index, column_index, "E")
break;
case "E":
updateMatrix(row_index, column_index, "L")
break;
default:
break;
}
};
return (
<ThemeProvider theme={filtersTheme}>
<Button variant="contained" color={handleColor()} onClick={()=> handleOnClick()} >{risk}</Button>
</ThemeProvider>
);
}
The child component updates a react-redux state with the onClick function as well, ideally I would like the parent component to re-render once this state changes.
React components re-render when the state is updated. So a solution would be to create a state and pass the setter to the child component and call it with a new value whenever a re-render is required.
you can also use Event bubbling in the parent element to capture the onClick event and update the state without needing to pass a prop to the child. read more about event bubbling here
a better implementation would be using the react's context API so that each child has appropriate access to the matrix data and would be re-rendered when the data changes automatically.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.