score:1

Accepted answer

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)

Related Query

More Query from same tag