React update s stateless component from another compoent - reactjs

Question

export default function App() { return(<div><customButton/><customTable/></div>) }
export default function customButton() { return(<div><button>update</button></div>) }
Since the app is the parent component and button and table are child components. I know this is not the best practice but how do I update(re-render) table component from the button component?

Answer 1

The way to do this would be to have some shared state at the closest ancestor. In the example below, I create a value state variable in App and pass it to the customTable element. I have a setValue setter that is passed to customButton. When the button is clicked, the value is updated and passed to customTable, causing the table to re-render with that new value.
export default function App() {
const [value, setValue] = React.useState(0);
return(
<div>
<customButton setValue={setValue} />
<customTable value={value} />
</div>
)
}
export default function customButton({ setValue }) {
return(
<div>
<button onClick={() => setValue(v => v + 1)}>update</button>
</div>
)
}

Answer 2

Sample application using custom table and custom button.
function CustomButton(props) {
return <button onClick={props.addClick}>{props.children}</button>
}
function CustomTable({ table }) {
return (
<table>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{table.map((item, i) => (
<tr key={i.toString()}>
<td>{i.toString()}</td>
<td>{item.name}</td>
</tr>
))}
</tbody>
</table>
);
}
function App() {
const [input, setInput] = React.useState('')
const [table, setTable] = React.useState([
{ name: "John" },
{ name: "Bukky" },
{ name: "Behem" }
]);
const handleInput = e=>{
setInput(e.target.value)
}
const addClick = e => {
const update = [...table, { name: input }];
setTable(update);
setInput('')
};
return (
<div>
<input type="text" value={input} onChange={handleInput}/>
<CustomButton addClick={addClick}>Click to Add</CustomButton>
<CustomTable table={table} />
</div>
);
}