Develop Reference

Best (functional) way in React to lift state an arbitrary number of levels?

I saw this post from 2017 where it was asked how to lift state up two levels in react. The answer used this in the context of an OOP design. Five years later, components can be written in functional programming, largely omitting usage of the this keyword.
What's the simplest way to lift state up any arbitrary number, n, levels? Is this something best accomplished with tools like redux or is vanilla React sufficient?
For example, I'm unsure how to best pass deleteItemHandler (noted in inline comments) from App to Item, passing through Display.
function App() {
const [todoList, todoListSetter] = useState([]);
const addTodoHandler = (item) => {
todoListSetter((prevItems) => {
return [item, ...prevItems]
});
};
const deleteItemHandler = (item) => { //Level 1
todoListSetter((prevItems) => {
return prevItems.filter(elem => elem !== item)
});
};
return (
<div >
<Display removeItem={deleteItemHandler} items={todoList} /> //Level 1->2
<Form onSaveItem={addTodoHandler}/>
</div>
);
};
const Display = (props) => {
props.items.map((item) => {
return(
<div>
<Item deleteItemHandler={props.removeItem} value={item}/> //Level 2->3
</div>)
});
};
const Form = (props) => {
const [newItem, setNewItem] = useState("");
const newItemHandler = (event) => {
setNewItem(event.target.value);
};
const submitHandler = (event) => {
event.preventDefault();
props.onSaveItem;
};
return(
<div>
<h2>Add item to todo list</h2>
<form onSubmit={submitHandler}>
<label>New Item</label>
<input type='text' onChange={newItemHandler} />
</form>
</div>
)
};
const Item = (props) => {
return(
<div>
<h1>{props.value}</h1>
<button onClick={props.deleteItemHandler}>Delete Item</button> //Level 3
</div>
)
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Here is the example given from the React documentation for the useContext hook:
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}

JS: Problem with with displaying a select list in modal on page

I have a problem with displaying a list for user selection. When I open the page for the first time, it works correctly. But after I reload the page, the users "disappear" or are unloaded.
Before reload
After reload.
Here is the code I have.
My-page:
const Page = observer(() => {
const { project } = useContext(Context);
const [modalVisible, setModalVisible] = useState(false);
useEffect(() => {
fetchUsers().then((data) => project.setUsers(data));
}, []);
return (
<Container>
<Button onClick={() => setModalVisible(true)}>
ChooseUser
</Button>
<ChooseUser show={modalVisible} onHide={() => setModalVisible(false)} />
</Container>
);
});
export default Page;
Modal:
const ChooseUser = observer(({ show, onHide }) => {
const { project } = useContext(Context);
return (
<Modal show={show} onHide={onHide}>
<Form>
<Form.Select>
{/* The problem with this list */}
{project.users.map((user) =><option>{user.username}</option>)}
</Form.Select>
</Form>
</Modal>
);
});
Context creating in index.js:
export const Context = createContext(null);
ReactDOM.render(
<Context.Provider value={{
project: new ProjectStore(),
}}
>
<App />
</Context.Provider>,
document.getElementById('root'),
);
ProjectStore
export default class ProjectStore {
constructor() {
this._users = [];
makeAutoObservable(this);
}
setUsers(value) {
this._users = value;
}
get users() {
return this._users;
}
}

You might try Array.from(project.users).map((user) ... instead of project.users.map((user) ... and see if that helps.

Pass a handler from class to component in loop

I want to pass a click handle (handleDeleteUser) to other component, from user.js to DropDownUserTool.js actually:
User.js
handleDeleteUser = (id) => {
alert(id);
};
...
// in render
User.data.map(function (User, i) {
return (
<DropDownUserTool
id={User.id}
click={(e) => {
this.handleDeleteUser(e);
}}
/>
);
});
DropDownUserTool.js
const DropDownUserTool = (props) => {
return (
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="secondary" caret>
tools
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<Link to={"/User/Edit/" + props.id}>Edit</Link>
</DropdownItem>
<DropdownItem onClick={() => props.click(props.id)}>
Delete
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
);
};
But after click it return an error:
TypeError: Cannot read properties of undefined (reading 'handleDeleteUser')
On this line:
<DropDownUserTool id={User.id} click={(e) => {this.handleDeleteUser(e)}}/>

You are trying to reach this inside map, just define this ! inside render before loop:
let realthis = this;
Then call your handler like this:
<DropDownUserTool id={User.id} click={(e) => {realthis.handleDeleteUser(e)}}/>

When you're doing your map you're using a standard function call and losing your context. Use an arrow function instead.
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [{ id: 1 }, { id: 2 }, { id: 3 }]
};
}
handleDeleteUser = (id) => alert(id);
render() {
return (
<div>
// this needs to be an arrow function
// that way you won't change the context of `this`
{this.state.data.map((item, i) => {
return (
<DropDownUserTool
id={item.id}
key={item.id}
handleDelete={this.handleDeleteUser }
/>
);
})}
</div>
);
}
}
const DropDownUserTool = ({ handleDelete, id }) => (
<button onClick={() => handleDelete(id)}>Delete</button>
);

Class component to functional component is not working as expected

I am implementing infinite scrolling with react-native, when I do a search the result is returned and if the result has many pages on the API, when I scroll the API returns more data .
my implementation works fine on the class component but when I try to convert it to a working component, when I do a search, the data is returned and if I did another search, the previous data from the previous search is still displayed
class component
class Exemple extends React.Component {
constructor(props) {
super(props);
this.searchedText = "";
this.page = 0;
this.totalPages = 0;
this.state = {
films: [],
isLoading: false,
};
}
_loadFilms() {
if (this.searchedText.length > 0) {
this.setState({ isLoading: true });
getFilmsWithSearch(this.searchedText, this.page + 1).then((data) => {
this.page = data.page;
this.totalPages = data.total_pages;
this.setState({
films: [...this.state.films, ...data.results],
isLoading: false,
});
});
}
}
_searchTextInputChanged(text) {
this.searchedText = text;
}
_searchFilms() {
this.page = 0;
this.totalPages = 0;
this.setState(
{
films: [],
},
() => {
this._loadFilms();
}
);
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size="large" />
</View>
);
}
}
render() {
return (
<View style={styles.main_container}>
<TextInput
style={styles.textinput}
placeholder="Titre du film"
onChangeText={(text) => this._searchTextInputChanged(text)}
onSubmitEditing={() => this._searchFilms()}
/>
<Button title="Rechercher" onPress={() => this._searchFilms()} />
<FlatList
data={this.state.films}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => <FilmItem film={item} />}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) {
this._loadFilms();
}
}}
/>
{this._displayLoading()}
</View>
);
}
}
the functional component
const Search = () => {
const [films, setFilms] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [page, setPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const [searchedText, setSearchedText] = useState("");
const _loadFilms = () => {
if (searchedText.length > 0) {
setIsLoading(true);
getFilmsWithSearch(searchedText, page + 1).then((data) => {
setPage(data.page);
setTotalPages(data.total_pages);
setFilms([...films, ...data.results]);
setIsLoading(false);
});
}
};
useEffect(() => {
_loadFilms();
}, []);
const _searchTextInputChanged = (text) => {
setSearchedText(text);
};
const _searchFilms = () => {
setPage(0);
setTotalPages(0);
setFilms([]);
_loadFilms();
};
const _displayLoading = () => {
if (isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size="large" />
</View>
);
}
};
return (
<View style={styles.main_container}>
<TextInput
style={styles.textinput}
placeholder="Titre du film"
onChangeText={(text) => _searchTextInputChanged(text)}
onSubmitEditing={() => _searchFilms()}
/>
<Button title="Rechercher" onPress={() => _searchFilms()} />
<FlatList
data={films}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => <FilmItem film={item} />}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (page < totalPages) {
_loadFilms();
}
}}
/>
{_displayLoading()}
</View>
);
};

With functional components, you cannot run effects (like getFilmsWithSearch) outside of useEffect.
From https://reactjs.org/docs/hooks-reference.html#useeffect
Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.
When you are calling _loadFilms from within then onSubmitEditing={() => _searchFilms()} event handler, you are not running inside useEffect, unlike the call to _loadFilms from useEffect that runs with the component mounts (because the second parameter to useEffect is [], it runs once on mount).
To solve this issue, you would typically have _searchFilms set a state variable (something like reloadRequested, but it does not have to be a boolean, see the article below for a different flavor) and have a second useEffect something like this:
useEffect(() => {
if (reloadRequested) {
_loadFilms();
setReloadRequested(false);
}
}
, [reloadRequested])
For a more complete example with lots of explanation, try this article https://www.robinwieruch.de/react-hooks-fetch-data.

Add a function into a onClick

I want to use React.js to build a single page application and I want to create a list in a material-ui drawer. I want to add an element into an array every time I press a button but I don't how to write this function.
Here is my buttom:
<RaisedButton
label="Next"
primary={true}
onClick={this.onNext}
/>
Here is onNext function:
onNext = (event) => {
const current = this.state.controlledDate;
const date = current.add(1, 'days');
this.setState({
controlledDate: date
});
this.getImage(moment(date));
}
And this is the code I want to add into onNext function:
menuItems.push(<MenuItem onClick={this.handleClose}>{this.state.image.date}</MenuItem>);

This is a sample code that adds drawer menu items using state
const { RaisedButton, MuiThemeProvider, Drawer, getMuiTheme, MenuItem } = MaterialUI;
class Sample extends React.Component {
state = {
open: false,
items: [],
}
handleClose = () => {
this.setState({ open: false });
}
handleOpen = () => {
this.setState({ open: true })
}
onNext = () => {
this.setState(state => {
return Object.assign({}, state, {
items: state.items.concat([
{
// add any other button props here (date, image, etc.)
text: `Item ${state.items.length + 1}`
}
]),
});
})
}
render() {
return (
<div>
<Drawer
openSecondary={true}
width={200}
open={this.state.open}
>
{this.state.items.map(item => (
<MenuItem onClick={this.handleClose}>{item.text}</MenuItem>
))}
</Drawer>
<RaisedButton
label="Next"
primary={true}
style={{ margin: 12 }}
onClick={this.onNext} />
<RaisedButton
label="Open Drawer"
primary={true}
style={{ margin: 12 }}
onClick={this.handleOpen} />
</div>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Sample />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
Try it here: https://jsfiddle.net/jprogd/eq533rzL/
Hope it should give you an idea how to go further