score:1
you can achieve this in two ways i think,
1- you can use redux state this.props.status directly in your component instead of this.state.status, this way you would dispatch an action on oncloseclick that would update redux store and change status to false.
2- though it's not recommended usually, you can drive state from props using life getderivedstatefromprops as
static getderivedstatefromprops(props) {
return {
status: props.status
}
}
now your component's internal state is derived from props.
you can read more about getderivedstatefromprops here
hope it helps
score:0
when you connect this component to the store you can access the status
using the this.props.status
and to update the status you need an action ex updatestatus
please read more about the actions:
https://redux.js.org/basics/actions
import react from "react";
import {modal, button, form} from "react-bootstrap"
import {connect} from "react-redux";
import {updateproject} from "../../actions";
class editprojectform extends react.component {
render() {
return (
<modal show={this.props.status} onhide={this.oncloseclick}>
<modal.header closebutton>
<modal.title>{this.props.project.title}</modal.title>
</modal.header>
<modal.body>
<form onsubmit={this.onsubmit.bind(this)}
style={{backgroundcolor: "#f5f5f5", paddingbottom: 30}}>
<form.group controlid="title" style={{margin: 10}}>
<form.label column>project title</form.label>
<form.control type="text" placeholder="enter a title"/>
</form.group>
<form.group controlid="description" style={{margin: 10}}>
<form.label column>project description</form.label>
<form.control as="textarea" placeholder="enter description"/>
</form.group>
<button variant="primary" type="submit" classname="float-right" style={{marginright: 10}}>
save
</button>
</form>
</modal.body>
<modal.footer>
<button variant="secondary" onclick={this.oncloseclick}>
close
</button>
</modal.footer>
</modal>
)
}
}
const mapper = function (state) {
return {
status: state.editproject,
project: state.selectproject
}
};
export default connect(mapper, {updateproject})(editprojectform)
Source: stackoverflow.com
Related Query
- How to update component state on through out redux
- How to update component state on redux state change?
- How to update React component after changing state through redux?
- How to update redux state using a react variable passed up to the component from a child
- React/Redux how to update state in component through onClick through reducer, then update it in the container
- How to update component on state change in redux
- How to update the redux state using local state in a component
- How to update the state of a sibling component from another sibling or imported component in REACT
- How to clear the component stored redux state in componentWillUnmount?
- How to make a React component setState() based on a Redux state change?
- how and when to call a react component methods after state change from redux
- react component connected, redux state changes... but no update to component?
- How to properly update a react native swiper component when state changes?
- How does a state update on an unmounted component cause a memory leak?
- How to test state update and component rerender after async call in react
- How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely
- How to test redux state update with react testing library and jest
- How to wait for a Redux action to change state from a React component
- How can I initialize Redux state for React component on its creation?
- How to update state of a component with value from reducer state in react-redux?
- How can I remove event Listener so it would not try to update state when component is unmounted?
- How can I store and subscribe component state to redux store?
- How to avoid rerender all child components which in loop when parent component state update
- How to subscribe to state outside React component in Redux Toolkit?
- React component not updating on final dispatch and update of redux state
- React Native: Redux - How to properly update TextInput via event and have redux state update?
- How to update parent state from child component in React + send a paramater
- How to update my useEffect hook when State change happen in a different .js file's component in ReactJS?
- How to set or update state of Array in grand child component
- How does React update a component and its children after a state change?
More Query from same tag
- Having this error in the console Each child in a list should have a unique "key" prop
- Anchor navigation using the <a> tag inside a react component
- if the json is duplicate, return the first element
- Login with navigation in other component
- Gatsby - Build website for stage/development - which command should I use?
- React Material-UI: 'Check the render method of `Paperbase`'
- How do I change Material UI Autocomplete font size?
- How to passing refs to component in React
- mobx computed getter is never evaluated
- How to handle data binding in Rails while using React.js for the front end?
- Is there a way to add onClick event to a custom component
- change button text and state by click and show list in react hooks
- How to load the same component again in React?
- antd Table onRow onClick to another component
- React Component: updating components, based on another component with no relation
- React hooks - useEffect method keeps fetching
- POST request in React in a for loop
- React component inside an SVG element
- how to get data from localhost:9200 (elasticsearch) using axios in react
- useState hook not working with usePrevious hook
- how to make custom radiobutton like this in reactjs
- How to get data from an object with arrays/strings and then pass that data to a React component
- Pass JSON object from child component to parent component
- Render component after action dispatch
- How to open a page in new tab on click of a button in react? I want to send some data to that page also
- Form Renders Outside of Modal
- Adding style attributes to a css class dynamically in react app
- Iterating through nested object in Reactjs?
- How to export hooks to other functions in react.js?
- Access Vega's view with react-vega and React