I am new to React and Redux, and I have the following sample code.
```
<React.Fragment>
<Spinner />
<TableWrapper
onClick={
()=>{sendActionToToggleIsLoading();
sendActionToChangeTableData()}
}
/>
</React.Fragment>
```
Two components, a Spinner and a Table, they both use its own container to connect to the redux store.
The Spinner connects to a isLoading props and the TableWrapper connects to an array [tableData] in store.
The onClick event on TableWrapper will send two actions to change isLoading and [tableData] in the store and cause two components to update.
My problem is TableWrapper will take a bit time to update, and Spinner doesn't. However the Spinner won't update until TableWrapper finishes componentDidUpdate.
So the behavior now is after onClick, the two components both stuck for a while and then both update to the new state.
My goal is to let the Spinner to update as soon as onClick is triggered and the TableWrapper updates itself.
Am I doing something wrong?
Maybe try to dispatch the loading action inside sendActionToChangeTableData(), I cant tell you why, but it works for me
Related
Basically, I have one page that consists of three main components. A map, a custom Search box, and a list that shows the selected locations, which is stored in the main component's state. For each location it renders a component (MarkerList) that has its own state and interactivity. These components are created using a .map() function.
The problem arises when a user interacts with the other two components. Any update to the main component's state causes it to create a new array of List components, and thus resets the state of that component. From my understanding this is what .map is supposed to do.
I've tried wrapping the .map in a callback, and that works until the itemList is updated, and then all interactivity with any of the list components is reset because all the components are new. I've also tried to instead render an array of the components instead of using the .map() function to no avail.
return (
<div>
<TestMap />
<div>
<Search items={items} />
{itemList.map(i =>
<MarkerList key={uuid()} items={i.items}/>
)}
</div>
</div>
)
I've omitted a lot of the styling and props. But the TestMap and Search components but have props which allow them to alter this component's state.
Is there any way to go about rendering the MarkerList components in such a way that they are not destroyed/created on every state change? And would there be any way to "remember" the state for each MarkerList when a new item is added to the itemList?
Any help would be greatly appreciated!
I've managed to add React elements dynamically depending on the content height Add React elements dynamically depending on the content height
I've prepared a codesandbox to show this:
https://codesandbox.io/s/html-react-parser-forked-8pl3b
However, the problem I'm having right know is that the child component, which shows the actual article, is not reacting to the state updated of its parent. This can be tested just by clicking on the Article 2 button.
Is it related to the usage of the reference? I can't figure out what is happening.
It's because the Article component has its own state. The html prop you pass in const [article, setArticle] = React.useState(parse(html)); is the initial value and it's ignored when the prop changes.
You can use the useEffect hook to update the state when the prop's changed. You will also need to reset the didInsertAds state:
React.useEffect(() => {
setArticle(parse(html));
setDidInsertAds(false);
}, [html]);
I've looked up whole google for my answer (haha).
What I am trying to achieve:
My fist screen is a form with some input fields which store the input to state.
By clicking "submit" the user comes to the next page/screen, where the previous input is supposed to show up. I want to show only the input data as a p-tag, not as an input tag anymore.
How do I achieve this? I am bloody new to reactjs.
I've thought about multiple solutions:
store the input data to an external JSON (which seems pretty complicated)
pass the data as props, but I am not aware of how I would do this
Thanks so far!
I'm going to assume that your second screen has the same parent component as your first, something like this:
render() {
return (
<div>
{this.state.showFirstScreen && <FirstScreen />}
{this.state.showSecondcreen && <Secondcreen />}
</div>
)
}
If that's the case, your FirstScreen component can accept a prop called something like onSubmit -- you say that you already store the input values from FirstScreen in state, so when FirstScreen is finished, you can call this.props.onSubmit(this.state) and it will send up the state to your parent component, as long as you've defined a callback function in the parent component:
{this.state.showFirstScreen && <FirstScreen onSubmit={this.onFirstScreenSubmit} />}
Then, you can save the state of the first screen into the state of your Parent component, and pass that part of the state down to SecondScreen
[edit] here's a very crude example: https://jsfiddle.net/df4s9ey8/
I'm a beginner in React and stuck with some problem.If suppose 2nd Render is same as 1st Render(means that next setState() calls won't cause any change to state) then 1st Render will unmounts or not as we know the React only updates the changes to the DOM.
The 2nd render won't unmount your component. Your component will just re-render if props or state changed.
eg.
In the example below I have some booleanExpression variable that will resolve to true or false and depending on that it will render <MyCoolComponent /> or not.
If booleanExpression is set to false my <MyCoolComponent /> will be removed from the DOM by React and you could catch "unmount" event inside that component.
Then after booleanExpression is set to true <MyCoolComponent /> will be added to the DOM again and you could catch "mount" event inside that component.
Unmount or mount would happen in a case like this:
{ booleanExpression && <MyCoolComponent /> }
Note:
Example above is just an example of syntax for conditional rendering of component and could be written in many ways.
I have the component that displays one button. Clicking this button loads the component which has a back button. I now want to return back to the component when this back button is clicked.
I am new to react and if I search online I see react-routing as the solution. Wouldn't simply rendering the component from component work? Just like was rendered from ?
Parent component has a state named isChildActive.
this.state = {isChildActive: false}
On the render of Parent you instantiate <ChildComponent active={this.state.isChildActive} goBack={() => this.setState({isChildActive: false})} />
And then you add to the onClick callback of the button at ParentComponent: <button onClick ={() => this.setState({isChildActive:true})} />
So that's the simple way of doing it. You own the state at your parent component because in react, data flows unidirectionally, from top to bottom. And then you pass a callback to your children components, to modify that parent owned state, when needed.
The best way of routing is using a library because it is not a simple task and you'll save a lot of time and headaches if you use a well-tested library. The industry standard is react-router