Develop Reference

Pass props with callback from Parent to component

I have this parent App.jsx, with two components <Child1/> and <Child2/> imported.
export default function App() {
const [isFlipped, setIsFlipped] = React.useState(false);
const handleSelectPlayers = () => {
setIsFlipped(true);
}
const handleDeselectPlayers = () => {
setIsFlipped(false);
}
return (
<Flippy
isFlipped={isFlipped}
flipDirection="horizontal" // horizontal or vertical
style={{ width: "400px", height: "600px" }} /// these are optional style, it is not necessary
>
<FrontSide>
<Child1 onSelectPlayers={handleSelectPlayers} /> // <-----
</FrontSide>
<BackSide>
<Child2 onDeselectPlayers={handleDeselectPlayers} /> // <-----
</BackSide>
</Flippy>
);
}
This is Child1.jsx, where I have 'players' set locally by this.setState():
class Child1 extends Component {
constructor(props) {
super(props);
this.state = {
players:[]
};
}
async getPlayers() {
const res = await fetch("/json/players.json");
const data = await res.json();
const players = Object.values(data.Players)
this.setState({
players: players
},() => console.log(this.state.players));
}
handlePlayers = () => {
this.props.onSelectPlayers();
};
render() {
return (
...
<Button handleClick={() => this.handlePlayers()}></Button>
...
);
And here Child2.jsx, which needs 'players' as props, given the fact they are fetched at Child1.jsx.
class Child2 extends Component {
constructor(props) {
super(props);
this.state = {
players:[]
};
}
handlePlayers = () => {
// do something with players here
};
handleChangePlayers = () => {
this.props.onDeselectPlayers();
};
render() {
return (
...
<Button handleClick={() => this.handlePlayers()}>
<Button handleClick={() => this.handleChangePlayers()}>
...
);
}
I know I can achieve this by having a callback to App.jsx at Child1.jsx, so I can pass players as props to Child2.jsx, but how so?

You can keep the players state on the Parent of both Child components. This way, you can pass it down as props to the relevant components. Refer to my comments on the code for insight
function App(){
const [players, setPlayers] = React.useState(); // single source of truth for players
return (
<React.Fragment>
<Child1 setPlayers={setPlayers}/> // pass state setter to Child1 where you perform the xhr to fetch players
<Child2 players={players}/> // pass players down as props to Child2
</React.Fragment>
)
}
class Child1 extends React.Component{
componentDidMount(){
this.getPlayers(); // sample fetching of players
}
getPlayers() {
this.props.setPlayers([ // set players state which resides on the parent component "App"
"foo",
"bar"
]);
}
render() {return "Child1"}
}
class Child2 extends React.Component{
componentDidUpdate(){
// this.props.players contains updated players
console.log(`Child2 players`, this.props.players);
}
render() {return "Child2"}
}
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

why I am getting warning-Functions are not valid as a React child. .......?

I was learning about various lifecycle components, so I have a counter in my code, which can be increased or decreased using buttons and I have a seed generator which should be called on button click and it should change the value of the counter to seed, I have added function for the seed to be set to Number.parseInt(Math.random() * 100)
when I run the code, it gives warning in chrome,
also when I click on increment , the counter is set to () => this.setState({ seed: Number.parseInt(Math.random() * 100) })1 , and when I press decrement(click) the counter is set to NaN.
There was a similar question related to this warning but that code was not related to mine.
APP COMPONENT
import React from "react";
import Counter from "./Counter";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
mount: true,
ignoreProp: 0,
seed: 40
};
this.mountCounter = () => this.setState({ mount: true });
this.unmountCounter = () => this.setState({ mount: false });
this.ignoreProp = () => this.setState({ ignoreProp: Math.random() });
this.seedGenerator = () =>
this.setState({ seed: Number.parseInt(Math.random() * 100) });
}
render() {
let counter = null;
if (this.state.mount) {
counter = (
<Counter ignoreProp={this.state.ignoreProp} seed={this.seedGenerator} />
);
}
return (
<div className="App">
<button onClick={this.mountCounter} disabled={this.state.mount}>
Mount Counter
</button>
<button onClick={this.unmountCounter} disabled={!this.state.mount}>
Unmount Counter
</button>
<button onClick={this.ignoreProp}>Ignore Prop</button>
<button onClick={this.seedGenerator}>Generate seed</button>
{counter}
</div>
);
}
}
export default App;
COUNTER COMPONENT
import React from "react";
class Counter extends React.Component {
constructor(props) {
console.log("Constructor");
super(props);
this.state = {
counter: 0,
seed: 0
};
this.increment = () => this.setState({ counter: this.state.counter + 1 });
this.decrement = () => this.setState({ counter: this.state.counter - 1 });
}
static getDerivedStateFromProps(props, state) {
if (props.seed && state.seed !== props.seed) {
return {
seed: props.seed,
counter: props.seed
};
}
return null;
}
componentDidMount() {
console.log("Component Did Mount");
console.log("-------------------");
}
shouldComponentUpdate(nextProps, nextState) {
if (
nextProps.ignoreProp &&
this.props.ignoreProp !== nextProps.ignoreProp
) {
console.log("Should Component Update- DO NOT RENDER");
return false;
}
console.log("Should Component Update- RENDER");
return true;
}
render() {
console.log("Render");
return (
<div>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
<div className="counter">Counter: {this.state.counter}</div>
</div>
);
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("Component Did Update");
console.log("--------------------");
}
componentWillUnmount() {
console.log("Component Will Unmount");
console.log("----------------------");
}
}
export default Counter;

You pass seedGenerator, a function, as the seed prop down to Counter, and since you have
return {
seed: props.seed,
counter: props.seed
}
in getDerivedStateFromProps (likely a copy-paste typo?), the
Counter: {this.state.counter}
render fragment tries to render seedGenerator, a function.

How pass data from the child component (the child has its own state) to the parent?

Expected effect: click button -> call function setEditing() -> call function item() inside setEditing() -> this.state.isEditing changes to true -> in parent this.state.isEdit changes to true. When I call the item () function, the value of isEditing does not change
App
class App extends React.Component {
constructor() {
super();
this.state = {
isEdit = false;
};
}
handleSomething = (value) => {
this.setState(prevState => {
return {
isEdit: value
};
});
}
render() {
return (
<div>
<ul>
{
this.state.todos
.map((todo, index) =>
<Todo
key={index}
index={index}
todo={todo}
handleSomething={this.handleSomething}
/>
)
}
</ul>
</div>
);
}
}
Todo
class Todo extends Component {
state = {
isEditing: false
}
setEditing = () => {
this.setState({
isEditing: !this.state.isEditing
})
this.item();
}
item = () => {
const { isEditing} = this.state;
this.props.handleSomething(isEditing);
}
render() {
return (
<button onClick={() => this.setEditing()}>Edit</button>
)
}
}

You'll need to call this.item after the state was changed, something like
setEditing = () => {
this.setState({
isEditing: !this.state.isEditing
}, this.item)
}
Also, if you want to derive a new state form the old one, you'll have to use something like this:
setEditing = () => {
this.setState(prevState => ({
isEditing: !prevState.isEditing
}), this.item)
}

Try basing your state change on the previous state, and call parent function in a callback :
setEditing = () => {
this.setState(prevState => ({
isEditing: !prevState.isEditing
}), this.item)
}
Because as written in the React doc :
setState() does not always immediately update the component. It may
batch or defer the update until later. This makes reading this.state
right after calling setState() a potential pitfall. Instead, use
componentDidUpdate or a setState callback (setState(updater,
callback)), either of which are guaranteed to fire after the update
has been applied. If you need to set the state based on the previous
state, read about the updater argument below.
(https://reactjs.org/docs/react-component.html#setstate)

class Todo extends React.Component {
state = {
isEditing: false
}
setEditing = () => {
this.setState({
isEditing: !this.state.isEditing
},this.item())
}
item = () => {
const { isEditing} = this.state;
this.props.handleSomething(isEditing);
}
render() {
return (
<button onClick={() => this.setEditing()}>
Edit
</button>
)
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
isEdit : false,
todos : [
"test 1",
"test 2"
]
};
}
handleSomething = (value) => {
this.setState(prevState => {
return {
isEdit: value
};
});
}
render() {
return (
<div>
<ul>
{
this.state.todos
.map((todo, index) =>
<Todo
key={index}
index={index}
todo={todo}
handleSomething={this.handleSomething}
/>
)
}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

How to create shared-singleton components across all the platform?

I'm thinking on creating a React component called LoadingMask, where I can show or not (depending on the state) a loading mask from any component. The idea is showing it before an ajax call, and hiding it after I receive the data.
I don't want to display two masks at the same time, so if one component is making a request, and another one creates another request, I want to add 1 to my "MaskCounter", and substract one when the Request is finished. If the counter is 0, I need to hide the LoadingMask.
I order to do this, I think I need to create a "Singleton" component, that I can share through the whole platform, so there's only exist one LoadingMask. I also don't think it's nice to send the events to hide/show the mask to all components.
Any ideas?

To share data between components, you can :
Use a lib like Redux, and keep in shared store your mask loader status
Use the React context api from your root component, and share loader status to all childrens. See an example below :
class Application extends React.Component {
constructor() {
super();
this.state = {
nbTasks: 0
};
this.addTask = this.addTask.bind(this);
this.removeTask = this.removeTask.bind(this);
this.isLoading = this.isLoading.bind(this);
}
addTask() {
this.setState(prevState => ({
nbTasks: prevState.nbTasks + 1
}));
}
removeTask() {
this.setState(prevState => ({
nbTasks: prevState.nbTasks - 1
}));
}
isLoading() {
return this.state.nbTasks > 0;
}
getChildContext() {
return {
addTask: this.addTask,
removeTask: this.removeTask,
isLoading: this.isLoading
};
}
render() {
return (
<div>
<ComponentX />
<ComponentY />
<LoadingMask />
</div>
);
}
}
Application.childContextTypes = {
addTask: PropTypes.func,
removeTask: PropTypes.func,
isLoading: PropTypes.func
};
const LoadingMask = (props, context) => (
context.isLoading()
? <div>LOADING ...</div>
: null
);
LoadingMask.contextTypes = {
isLoading: PropTypes.func
};
class ComponentX extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
message: 'Processing ...'
};
}
componentDidMount() {
this.context.addTask();
setTimeout(() => {
this.setState({
message: 'ComponentX ready !'
});
this.context.removeTask();
}, 3500);
}
render() {
return (
<div>
<button disabled>{this.state.message}</button>
</div>
);
}
}
ComponentX.contextTypes = {
addTask: PropTypes.func,
removeTask: PropTypes.func
};
class ComponentY extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
message: 'Processing ...'
};
}
componentDidMount() {
this.context.addTask();
setTimeout(() => {
this.setState({
message: 'ComponentY ready !'
});
this.context.removeTask();
}, 6000);
}
render() {
return (
<div>
<button disabled>{this.state.message}</button>
</div>
);
}
}
ComponentY.contextTypes = {
addTask: PropTypes.func,
removeTask: PropTypes.func
};
ReactDOM.render(
<Application />,
document.getElementById('app')
);
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="app"></app>

I found this library use-between to be simple, powerful and useful. It removes complexity of redux for sharing data between within functional components.
import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';
Context/Session.ts
export const useShareableState = () => {
const [count, setCount] = useState(0);
const inc = useCallback(() => setCount(c => c + 1), []);
const dec = useCallback(() => setCount(c => c - 1), []);
return {
count,
inc,
dec
};
};
App.tsx
import { useBetween } from 'use-between';
import { useShareableState } from './src/Context/Session'
const useSharedCounter = () => useBetween(useShareableState);
const Count = () => {
const { count } = useSharedCounter();
return <p>{count}</p>;
};
const Buttons = () => {
const { inc, dec } = useSharedCounter();
return (
<>
<button onClick={inc}>+</button>
<button onClick={dec}>-</button>
</>
);
};
const App = () => (
<>
<Count />
<Buttons />
<Count />
<Buttons />
</>
);
export default App;

Changing setState in loop

How does one show a counter going from 1 to 2 to 3 to n on the click of a button. I've tried doing a setState in a for loop but thats not worked.
I know react's setState is async, i've even tried to use prevState, but its not worked.
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
this.startCounter = this.startCounter.bind(this);
}
startCounter() {
const self = this;
for (let i = 0; i < 100; i++) {
this.setState(prevState => {
const counter = prevState.counter + 1;
return Object.assign({}, prevState, {counter: counter})
});
}
}
render() {
return (
<div>
Counter Value: {this.state.counter}
<button onClick={this.startCounter}>Start Counter</button>
</div>
)
}
}
export default App;
webpack bin below
https://www.webpackbin.com/bins/-KkU1NJA-ectflyDgf_S
I want to increase the count from 0 to n as a timer of sorts when clicked.

Something like this?
When you run the startCounter() function, you start the interval which increments the counter value by 1, each second. Once it reaches n (5 in this example), it resets.
class App extends React.Component {
constructor() {
super();
this.interval;
this.state = {
counter: 1,
n: 5
};
}
startCounter = () => {
if (this.interval) return; //if the timer is already running, do nothing.
this.interval = setInterval(() => {
let c = (this.state.counter % this.state.n) + 1;
this.setState({
counter: c
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval); //remove the interval if the component is unmounted.
}
render() {
return (
<div>
Counter Value: {this.state.counter}
<button onClick={this.startCounter}>Start Counter</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>