0

I found the following answer to a question that I currently have (link). In in, he said "If you pass any props to the component from the parent component and you update that prop in children or that prop update in the parent component so both will re-render." Can anyone give me a brief code snippet that achieves the case where you pass a prop to a child component from a parent component, then you update it in the child component so that both components will re-render? I am not still sure if this is attainable...

(scenario) Let's say I have a parent component which is a sidebar containing a list of items. When I click an edit button of one of items, a modal (child component) where I can change the item name pops up. As hitting a submit button with a new item name as an input, the previous item name gets updated with the new one behind the scenes and the modal gets closed. As this happens, I would like the parent component to re-render to reflect the change on UI.

const Parent () => {
  const [isOpen, setIsOpen] = useState(true);
  const [{ items }, dipatch} = useStateValue(); //Fetch items object through React Context API
  return (
    {items.map((item) => (
      <p>{item}<p />  
    ))}
    <Child callback={() => setIsOpen(false)} />
  )
}

const Child (callback) => {
  const submitHandler = () => {
    postRequest(data); //updates items' data + updates items in the context
    callback(); //After closing the modal here, I would like the parent component re-render.
  }
  return (
    <Modal
      isOpen={isOpen}
      submit={submitHandler}
      onClose={callback} 
    >...
    <Modal />
  )
}
emptyfullstack
  • 93
  • 1
  • 8

1 Answers1

0

Code example, when values from the parent are passed to the react child component, and data changes come from the child component.

Note that there is no state in the child component and it takes data from the values passed to it

import {useState} from 'react'

const NumberIn = ({num, change}) => {
  return (
    <input type='number' onChange={(e) => {
      change(e.currentTarget.value)
    }} value={num} />
  )
}

export default function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <NumberIn num={a} change={setA} /> + {' '}
      <NumberIn num={b} change={setB} /> = {' '}
      <span>{Number(a) + Number(b)}</span>
    </div>
  );
}

We pass a value and a function (a kind of callback) to the child component. When an event occurs in a child component, the passed function will be called, but it will be called in the parent component, because it belongs to the parent component, but with the parameters passed by the child component.

SwaD
  • 492
  • 2
  • 9
  • Thanks for your answer. I came to wonder a case where a child component is like a modal which a user input is submitted and it gets closed immediately. Then the parent component needs to re-render. Is there any way that I could achieve this? – emptyfullstack Nov 08 '22 at 22:53
  • @emptyfullstack It is possible to achieve this behavior, but it is not possible to give a definite answer, because you need an exact example of what you want to implement. – SwaD Nov 09 '22 at 07:56
  • I added a particular scenario that I would like to achieve. Hope it helps you understand what I would like to implement. – emptyfullstack Nov 09 '22 at 09:18
  • Added an example code. – emptyfullstack Nov 10 '22 at 11:11
  • Were you able to figure out? I am having the same question – dave_bell Apr 23 '23 at 01:50