Statement
Display two buttons for incrementing and decrementing the value. Make it optimized so that on each render you pass exact same onClick functions to each button (not necessarily same function to both buttons)
Statement
We are given function fetchData that returns a promise of string; Sometimes it resolves, sometimes it rejects.
const fetchData = (): Promise<string> => {
return new Promise((resolve, reject) => {
const time = Math.random() * 1000 + 500;
setTimeout(() => {
if (Math.random() > 0.5) {
const userId = Math.floor(Math.random() * 10000);
resolve(`Hello user${userId}!`);
} else {
reject(new Error("random error"));
}
}, time);
});
}🔹 Call fetchData and if promise resolves, render it on the page.
🔹 Display loading text while promise is not fulfilled yet.
🔹 If promise is rejected, display custom text on page and a single button. Clicking that button should retry calling fetchData and display loading text too, until promise is fulfilled (either resolved or rejected).
Statement
🔹 Store some number in state with name counter and initial value 0.
🔹 Write method without any parameters for incrementing counter by 1.
🔹 Write another method without any parameters that calls first method synchronously two times.
🔹 Render button which calls second method when clicked. Display counter too.
🔹 Make sure that your first method is written correctly so that clicking button will cause incrementing counter by two.
Hint
Since passing new state object to setState does not update this.state synchronously, we can't achieve in this way.
Instead of passing an object, you can pass function to setState. In this updater function, you are passed most recent value of state and props (though props is irrelevant in this problem). You can return null if you do not want to update state, or partial state for updating it. For instance,
this.setState((state, props) => {
return {
x: state.x - 1,
};
});Prerequisites
âš« Refs: https://reactjs.org/docs/refs-and-the-dom.html (Especially Adding a Ref to a Class Component section)
Statement
You are given uncontrollable child component.
Parent component stores number of counters and renders that amount of child components. It has two buttons Add counter and Increment all counters.
🔸 You are not allowed to edit child component.
🔹 Implement incrementCounters so that it increments counters of all child components that are rendered.