Convert class component state to functional component
Solution 1:
It's pretty simple, although I would suggest you to checkout hooks concepts in react.
const [data, setData] = useState({
center: { lat: 5.6219868, lng: -0.23223 },
locations: {},
users_online: [],
current_user: ''
});
//one way
setData((prevState) => ({
...prevState,
center = location;
locations[`${prevState.current_user}`] = location;
}));
//another way
const handleTextChange = (text,field) => {
setStates(prev => ({
...prev,
[field]: text,
}))
};;
Also, you can main 4 different states as well.
const [center, setCenter] = useState({ lat: 5.6219868, lng: -0.23223 });
const [locations, setLocations] = useState({});
const [usersOnline, setUsersOnline] = useState([]);
const [currentUser, setCurrentUser] = useState('');
Solution 2:
This is kind of a broad question and I think you should follow any getting started with hooks tutorial to understand what's going on. Anyways, in your case, you will first need to change it into a function instead of a class, then specify the four states values you have using an useState for each. For the batched updates, wrap the state settings functions inside an unstable_batchedUpdates method to trigger a single rerender for multiple state updates. Keep in mind, that the last method is unstable and might change in the future, but that gets things done for now.