We Keep Coding

React - Rxjs: Transform a parent component event handler in a stream

Given a parent component renders the following:
const handleButtonClick = (e) => {
//code omitted
}
<ChildComponent
handleButtonClick={handleButtonClick}
/>
And the child component which adds this handler to a button:
const ChildComponent = (props) => {
const handleButtonClick = props.handleButtonClick
return (
<button onClick={handleButtonClick}>Click me!</button>
)
}
How would I transform handleButtonClick in the parent in a Rxjs Stream?
I have thought of one way, which is creating a subject:
const clickStream = new Subject()
const handleButtonClick = (e) => {
clickStream.next(e)
}
I would also be interested in how to do that in a scenario where the parent renders multiple, dynamic children, e.g.:
return(
<>
{
children.map((child, index) => {
<ChildComponent handleButtonClick={handleButtonClick}/>
})
}
</>
)

Pass functional component from child to parent in React

Is it possible to pass a functional component from a child component to a parent component? I'm trying to do a dynamic modal that is displayed inside the parent but that the children can populate through a function from a provider, for example:
setModal(() => (
<div>content</div>)
)
And the parent receives this component:
const [modal, setModal] = useState(false)
const [modalContent, setModalContent] = useState<FunctionComponent>()
...
<Provider value={{
setModal: (content: FunctionComponent) => {
setModalContent(content); // This updates the state to hold a function component and to re-render
setModal(true); // This updates a state flag to show the overlay in which the modal is rendered
},
}}>
...
</Provider>
The content of the modal should be dynamic. I was trying to use the state of the component to hold the functional component but I don't think if that's possible or if it's a good practice.

If I understand your question correctly, you're still looking to pass a function from the parent to each child but each child should be able to change the state of a modal component that the parent also has ownership over.
For the above scenario this is something you can do:
const Provider = ({ children, updateModal }) => {
// With this, every child has the ability to call updateModal
return React.Children(children).map(child => cloneElement(child, { updateModal }));
};
const ModalComponent = ({ open, children }) => {
if (!open) return null;
return (
<dialog>
{children}
</dialog>
);
};
const ParentComponent = () => {
const [modal, setModal] = useState(false);
const [modalContent, setModalContent] = useState(null);
const updateModal = (content) => {
setModalContent(content);
setModal(true);
};
return (
<>
<Provider updateModal={updateModal}>
{...insert children here}
</Provider>
<ModalComponent open={modal}>
{modalContent}
</ModalComponent>
</>
);
};

Re-render a sibling component using hooks

I am new to react and I'm trying to get the one component to re-render from another component.
Here's my code:
const Parent = () => {
return (
<div>
<Child1 />
<Child2 />
</div>
)
}
What I intend to do is update Child1 when there is some trigger from Child2.
One way I can think of is to get the parent component to re-render so both Child1 and Child2 will be updated. I tried to do this by lifting the state but it doesn't seem to re-render each of the child components. Here's the code
const Parent = () => {
const [value, setValue] = useState('')
const handlePost = (newValue) => {
setValue(newValue)
}
return (
<div>
<Child1 />
<Child2 onPost={handlePost} />
</div>
)
}
const Child2 = (props) => {
// This function is executed when there is a trigger.
// In this case, when a post request is made to the server
const onPost() => {
props.handlePost('new value')
}
}
Edit:
The reason why the component(s) needs to be re-rendered is because they are making changes to the API and these changes need to be reflected on the screen. It has nothing to do with any state variables.

Your question is an XY problem. In the example given it does not make sense that Child1 rerenders cause there is no need for it. From the comments your real problem is that you update one API, which is supposed to change the response of another API. If you however already know how the response will change, and that it will change, this can be reflected in one state that changes for both API calls:
function useEntries() {
const [entries, setEntries] = useState([]);
useEffect(() => {
setEntries(getEntries());
}, []);
function addEntry(entry) {
postEntry(entry);
setEntries(prev => [...prev, entry]);
}
return { entries, addEntry };
}
function Parent() {
const { entries, addEntry } = useEntries();
return <>
<Entries entries={entries} />
<AddEntry addEntry={addEntry} />
</>;
}

From the comments in the post, it sounds like you have Child1 presenting results of a GET request (being done in Child1). Child2 can add or modify that state on the server with some kind of request and you want to trigger a re-render in order to make Child1 refresh the state.
The general problem is, that children should only re-render if props or their used contexts change. I see two options how to approach this:
Lift the handling of the requests up into the parent. Put the results of the request as props into the child component you want to refresh.
Make the sibling aware of the request having to reload by setting it to "dirty" in some way. Either through context or routing state around through the parent.
Usually it's best to go with option 1 if the components are not too deeply nested. It could look like this:
const Parent = () => {
const [posts, setPosts] = useState([]);
const fetchNewestPosts = useCallback(async () => {
const fetched = await fetchPosts();
setPosts(fetched);
}, [fetchPosts, setPosts]);
const handleSubmit = useCallback(async (event) => {
const newPost = getValuesFromSubmitEvent(event);
await sendNewPost(newPost);
// you could even set the posts here to what you think the
// send request will result in (see Jonas Wilms answer), like
// setPosts(posts => [newPost, ...posts]);
await fetchNewestPosts();
}, [fetchNewestPosts, getValuesFromSubmitEvent, sendNewPost]);
useEffect(() => {
fetchNewestPosts();
}, [fetchNewestPosts]);
return (
<div>
<Child1 posts={posts} />
<Child2 submitNewPost={submitNewPost} />
</div>
);
);
const Child1 = ({posts}) => {
return (
<ul>{posts.map(post => <li key={post.id}>post.title</li>)}</ul>
);
);
const Child2 = ({submitNewPost}) => {
return (
<form onSubmit={submitNewPost}>...</form>
);
);
As a nice side-effect, Child1 and Child2 now need a lot less logic and can be styled independently of the fetchPosts and sendNewPost functions.

Ciao, lets say that Child1 must be re-rendered on handlePost. Your parent component will be:
const Parent= () => {
const [value, setValue] = useState('')
const [rerender, setrerender] = useState(false)
const handlePost = (newValue) => {
setValue(newValue);
let setrerender_temp = rerender;
setrerender(!setrerender_temp);
}
return (
<div>
<Child1 rerender={rerender} />
<Child2 onPost={handlePost} />
</div>
)
}
Then, in your Child1 component:
import React, { useReducer, useEffect } from 'react';
...
export default function Child1(props) {
const [,forceRender] = useReducer((s) => s+1, 0);
useEffect(() => forceRender(), [props.rerender]);
...
}

React-Hooks- How to assign an unique "ref" to every rendered item in a renderItem using FlatList?

I am trying to convert a class component to a function component and struggling with assigning the refs to each rendered item in a Flatlist.
This is the original class component.
...
constructor(props) {
super(props);
this.cellRefs = {};
}
....
_renderItem = ({ item }) => {
return (
<Item
ref={ref => {
this.cellRefs[item.id] = ref;
}}
{...item}
/>
);
};
...

Assuming both your Item and the component rendering the FlatList need to be functional components, you need to take care of 2 things
Add dynamic refs to each Item component
Make sure that the Item component uses useImperativeHandle with forwardRef to expose functions
const App = () => {
const cellRefs = useRef({}) // Adding an object as we need more than one ref
const _renderItem = ({ item }) => {
return (
<Item
ref={ref => {
cellRefs.current[item.id] = ref;
}}
{...item}
/>
);
};
....
}
Post that you need to change your Item component like
const Item = React.forwardRef((props, ref) => {
...
const handleClick = () => {};
useImperativeHandle(ref, () => ({
// values that need to accessible by component using ref, Ex
handleClick,
}))
...
})
P.S. If Item is not a functional component, you can avoid the second step

do something like that (from react doc)
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}

How to simulate parent component state while testing with jest

I have this component, props are passed from parent component. Ingredients and activeIngredients are stored in the state of parent component.
export const IngredientsBox = ({
ingredients = [],
activeIngredients = [],
onAddIngredientHandler,
onRemoveIngredientHandler,
onResetIngredientsHandler
}) => {
return (
<Div>
{ingredients.map((name) => {
return (
<IngredientButton
name={name}
key={name}
isActive={activeIngredients.includes(name)}
onAddIngredientHandler={onAddIngredientHandler}
onRemoveIngredientHandler={onRemoveIngredientHandler}
/>
);
})}
<ResetButton onResetIngredientsHandler={onResetIngredientsHandler}></ResetButton>
</Div>
);
};
export const IngredientButton = ({ name, isActive, onAddIngredientHandler, onRemoveIngredientHandler }) => {
const onClick = isActive ? onRemoveIngredientHandler : onAddIngredientHandler;
return (
<Button active={isActive} onClick={() => onClick(name)}>
{name}
</Button>
);
};
What I wanna do is to test this component in isolation, but can't figure out how to imitate parent component state to change dynamically, after every method call.
import React from 'react';
import {IngredientsBox} from './IngredientsBox';
import renderer from 'react-test-renderer';
// ingredients and activeIngredients are supposed to imitate parent component state
let ingredients = ['sugar', 'honey', 'mustard', 'watermelon'];
let activeIngredients = [];
const onAddIngredientHandler = (name) => {
activeIngredients = [...activeIngredients, name]
}
const onRemoveIngredientHandler = (name) => {
activeIngredients = activeIngredients.filter((value) => value !== name)
};
test('Button toggle the class on click', () => {
const component = renderer.create(
<IngredientsBox
ingredients={ingredients}
activeIngredients = {activeIngredients}
isActive = {activeIngredients.includes(name)}
onAddIngredientHandler = {onAddIngredientHandler}
onRemoveIngredientHandler = {onRemoveIngredientHandler}
/>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
tree.children[0].props.onClick(); // I expect this to add this element to activeIngredients and it ofcourse works.
tree = component.toJSON();
expect(tree).toMatchSnapshot();
tree.children[0].props.onClick(); // I expect this to remove this element from activeRecipes, it doesn't work, it adds it one more time, and so on. I understand this behaviour is because onClick method was assigned at the beginning and it doesn't change.
tree = component.toJSON();
expect(tree).toMatchSnapshot()
})
Is there any way to make it behave like react component with render() method? So it rerender with fresh state each time?