score:0
it feels like you would want the contacts as part of the state. in that case the code would be:
state = { contactls: getcontactsls()}
but as we are calling values from localstorage a more appropriate place might be
componentdidmount()
method.from react docs
avoid introducing any side-effects or subscriptions in the constructor. for those use cases, use componentdidmount() instead.
then the code would be
componentdidmount(){
const contacts = getcontactsls()
this.setstate({ contacsls: contacts })
}
don't forget to change to this.state.contactsls
<route exact path="/" component={() => <contacts contacts={this.state.contactsls} />} />
====
ps
another problem i can see in the existing code is the misuse of component constructor.
this is not obvious but the line
contactsls = getcontactsls();
is equivalent to
constrcutor(){
this.contactls = getcontactls();
}
from react documentation we read
typically, in react constructors are only used for two purposes:
- initializing local state by assigning an object to this.state.
- binding event handler methods to an instance.
score:0
you could use <redirect>
component from react-router-dom
package. to get it working you initially setstate where redirect is set to false.
this.state = {
redirect: false
}
once the addcontact
opeartion is done, update the state
this.setstate({
redirect: true
})
inside of your addcontact
component, the state will decide if it has to show the actual component or to redirect to the attached path.
something like this:
import {redirect } from 'react-router-dom';
class addcontact extends react.component {
//add the initial state
// addcontact operation
render(){
if(this.state.redirect)
return <redirect to="/" />
return (
//the markup for addcontact
)
}
}
Source: stackoverflow.com
Related Query
- I have a problem with redirection in React
- I have a problem with my version of React
- I have problem with fetching data in JSX react component
- i have a problem with displaying my question in seperate page in react
- I have problem with read promise from async function in my react app with
- I should solve a React exercise of a timer and reset it by a button.I have problem with resetting my timer
- Got a problem with React useContext - returns undefined and have no idea what's wrong
- React Router with redirection to login page but also to have 404 NotFound route
- I have a problem with react and firestore database
- I'm rendering a react class Some elements seem to have a problem with closing tags but i made sure there's no unclosed tags in between what can i do?
- Have problem with importing image in react
- I Have A Problem With Deploying My React App In Github Pages, It Shows Me A Blank Page
- have problem with react useEffect function
- i have a problem with react ,, i want to have 2 navbar styles in app
- React prop types with TypeScript - how to have a function type?
- Do I have to save react component files with a jsx extension
- Do React hooks really have to start with "use"?
- How to solve react webpack problem with npm-start
- Redirection with React Router Component
- Problem with Autocomplete (Material UI + React + Reagent/ClojureScript)
- React js - problem with proxy for web socket link in react
- Expect jest mock to have been called with an argument fails in react testing library
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- Getting an error trying to start React right after (There might be a problem with the project dependency tree....)
- Problem with nested fetch request in React
- Child Components have no props.theme for Styled Components with React Router
- Problem with url with instance in react using react-router
- Understanding how to have multiple pages with React and react-router
- Okta redirection fails with React HashRouter
- any way to have multiple tabs(screens) in react native with a preview like in a browsers do for example?
More Query from same tag
- How to change the filtered date format in material table react?
- How to convert component with many states to react functions
- How to use native node_modules in react js (reactjs + electron) components?
- Call local API from local client
- Can't display fractions in React project. Child error instead even with mathjs
- Navbar doesn't stick to the top
- Using PersistGate on my React App doesn't render
- need to find a code to call two functions when div is clicked in react
- Unable to read data from ReactJS Webpage in Arduino using esp32
- Passing Reactjs variable to Image and link Tags
- Typescript: how to set type of children in React Component?
- Can Yarn list all available scripts?
- Is it possible to make SVG equal to path?
- React anti pattern?
- How to update a parent's component state from a child component in Reactjs
- React Hooks Form not returning values on submit
- how to use external jquery plugin in react
- Automatically obtain new token after it expires
- updating a prop when another prop is received in mapStateToProps
- handling the table pagination when refreshing remote data programmatically
- React Router not passing params through useParams onto my page
- 401 Error when sending axios get request with Auth Headers
- Mapping nested arrays in React
- Redux proper send of payload
- How to make a single React Docker build/image to run through all environments?
- How to load data from multiple json files in react
- conditional rendering of the same component with different props does not unmount the component in ReactJS
- React private route not renderring the Login component
- React - hide component when an element in Navigation menu is clicked
- How to use router links inside switch