Is there a way to trigger a re-render of a functional child component when the parent state changes? When dealing with a class component as a child, I can use componentWillReceiveProps to solve this issue. However, my child component is a functional one.
Here's the scenario: I have a table component with radio buttons on the page. Selecting a specific radio button successfully changes the table content. But if I'm on the 4th page of the table and switch to another radio button, causing a change in the table length, I want to be taken back to the first page automatically. Unfortunately, the child component does not re-render in this situation. How can I achieve this?
This code snippet demonstrates the setup:
Parent Component:
export default class Report extends Component {
constructor() {
super();
this.state = {
table_data:[],
page: 0,
analys_type: "1"
}
}
setData = () => {
......
......
}
handleChangeAnalysType = (event) => {
this.setState({
analys_type: event.target.value,
page: 0
}, () => {
this.setData();
});
}
render() {
<div>
<Paper className="input-box">
<div>
<FormControl component="fieldset">
<RadioGroup name="analys_type" value={this.state.analys_type} onChange={this.handleChangeAnalysType}>
<FormControlLabel value="1" control={<Radio />} label="Day" />
<FormControlLabel value="2" control={<Radio />} label="Week" />
<FormControlLabel value="3" control={<Radio />} label="Month" />
</RadioGroup>
</FormControl>
</div>
</Paper>
<Paper className="table-box">
<AnalysTable table_data={this.state.table_data} analys_type={this.state.analys_type} current_page={this.state.page} />
</Paper>
</div>
}
}
Child Component:
export default function AnalysTable(props) {
const [page, setPage] = React.useState(props.current_page);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
render (
<div>
<TableContainer>
......
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={props.table_data.length}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
labelRowsPerPage="rows"
/>
</div>
)
}