Send data between React components during runtime

Question

I am developing my first React app and am currently facing the problem that data has to be exchanged between several components at runtime. I have found various approaches to this, but am totally confused as to which one I should follow and which one makes the most sense.

Requirement 1: Send data from the parent component to the child component (while running)

Data should be sent from the parent component to a child component. This could be, for example, the content of an input field. I currently use the reference API for this. In the parent component I have created a reference to the child component and call the function (with parameters) of the child component using a callback (onChange).

const map = useRef();

[...]

<Map ref={map} />

[...]

<input type="text" placeholder="Enter location" onChange={enterLocation} />

[...]

function enterLocation(event) {
    map.current.locationSearch(location); // Function of the child component
}

Requirement 2: Send data from the child component to another child component (while running)

Data is to be sent between two child components. I have found various approaches to this: Redux, Context API and also the Reference API. My idea is to first send the data to the parent component and then send it on to the other child component via a reference. However, this seems unnecessarily complicated to me.

Something like in this Codesandbox should cover your use-case - no references needed. Sure there are multiple ways to do it but this is the easiest solution with-out Redux or ContextApi. It keeps the state in the parent and childs are just rendering things. If this is what you're looking for, I'll add an answer with some details to the code. — AWolf
– AWolf, Commented Jun 7, 2021 at 21:10

HardCoreQual · Accepted Answer · 2021-06-07 20:53:23Z

2

Usually the simplest solution is the best.

for first example you can send data from parent component to children component as props:

function Parent() {
   const data = 'some_string';

  return <div>
       <Child title={data} />
       <div>Other component</div>
    </div>
}

function Child(props) {
   return <span>{props.title}</span>
}

for second requirement you can use state, if two children use some state, you can up this state in parent:

function Parent() {
  const [state, setState] = useState('');

  return <>
    <Input value={state} setValue={setState} />
    <Length str={state} />
  </>
}

function Input(props) {
  return <input value={props.value} onChange={(e) => props.setValue(e.target.value)} />;
}

function Length(props) {
  return <div>You insert string with length: {props.str.length}</div>
}

answered Jun 7, 2021 at 20:53

HardCoreQual

4112 gold badges4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonas Over a year ago

Thanks! Isn't it the case that props are passed to the components at the start of the app? However, I want data to be sent to the child during runtime (e.g. after an input).

HardCoreQual Over a year ago

props are passed to the components in during render component, component rendering not only at the start of the app, but and if changed props or state, try my second example in browser or codesandbox.io/s/new

Collectives™ on Stack Overflow

Send data between React components during runtime

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related