Go back to the App component without react routing - javascript

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

Related

How do you render an array of components in a way that preserves the child component state?

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!

how to get updated props in other components which are in other routes?

I have a react project. I have 3 routes, which are /, /adult, /children.
I have created the states and onChange handlers in App.js files and passing them as props to the sub components and updating the value in one of the sub component but the updated value not showing in the other child component
Project Link : https://codesandbox.io/s/trusting-haslett-pz2by?file=/src
When I am incrementing adult value, its updating in /adult page, but I have opened /children route in another tab but the props value isn't getting updated there
How can I achieve this?
If you're running the same page in two different browser tabs, these are completely unrelated. Each has its own memory, and executes its own javascript, and one cannot affect the other, unless you involve a server or websockets.
Your current code works fine, as long as you stay in the same tab. Your state is in the App component and will be available to both the adults route and the child route. To test this, try adding a link from your adult page to your children page. You can increment a few times on the adult page, then link to the children page and see the same value
import React from "react";
import { Link } from "react-router-dom";
const Adult = (props) => {
return (
<div>
<button onClick={props.incAdult}>Increment</button>
<p> No of Adults : {props.adults} </p>
<Link to="/children">Test</Link>
</div>
);
};
export default Adult;

ReactJS passing input data to next screen/component

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/

How to create custom modal in reactjs app?

I want to make custom confirmation modal whenever user wants to delete his own post. How to approach that to use as less as possible code? I was thinking about independent component with logic inside (user can send via props function on yes/no, etc) but the problem I can't figure out is how to mount this component when user click on a button? Do I need to use local state inside every component when I need to use modal? Something like:
showModal ? <Modal onYes={()=>{}} onNo={()=>{}} title='whatever you want' /> : ''
Can I achieve that in other way? I hope I explained well.
You can use HOC as well. Keep show/hide state inside HOC and then pass props/functions (with currying) from Parent component
Small example - https://codesandbox.io/s/withtoggle-hoc-8bd0r

React component updates holds other component to update

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

Categories