How to make a modal window in react & redux?

Question

JavaScript

I want to make a modal window on button click, with a form for adding a new object. How to achieve this based on react and redux?

Answer 1

https://react.parts/web?search=modal

Answer 2

It is not possible to attach redux to this case.
Here is the container code:

let name;
let description;
const customStyles = {
  content : {
    ...
  }
};

let LeftMenu = ({modalIsOpen, firstButtonClick, close}) => {
  return (
    <div>
      <nav >
        <ul className='LMenu'>
          <MenuButton text = {FIRST_BUTTON} onClick = {() => firstButtonClick(<Modal/>)}/>
          ...
        </ul>
      </nav>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={close}
        style={customStyles}
      >

        <h2 ref='subtitle'>Hello</h2>
        <button onClick={close}>close</button>
        <div>I am a modal</div>

        <form onSubmit={e => {
          e.preventDefault();
          createFamily(name.value, description.value)
        }}>
          <ul>
            <li><input placeholder='Введите название семьи'
                       ref={node1 => {name = node1}}/></li>
            <li><input placeholder='Введите описание семьи'
                       ref={node2 => {description = node2}}/></li>
            <button type='submit'>Создать</button>
          </ul>
        </form>
      </Modal>
    </div>
  );
};

LeftMenu.propTypes = {
  modalIsOpen: PropTypes.bool.isRequired,
  firstButtonClick: PropTypes.func.isRequired,
  close: PropTypes.func.isRequired
};

const mapDispatchToProps = (dispatch) => {
  return {
    firstButtonClick: () => dispatch(createFamilyModal()),
    close: () => dispatch(closeFamilyModal())
  }
};

const mapStateToProps = (state) => {
  return {
    modalIsOpen: state.modalIsOpen
  }
};

LeftMenu = connect(
  mapStateToProps,
  mapDispatchToProps
)(LeftMenu);


export default LeftMenu

actions:

export function createFamilyModal() {
  return {
    type: CREATE_FAMILY_MODAL
  }
}

export function closeFamilyModal() {
  return {
    type: CLOSE_FAMILY_MODAL
  }
}

export function createFamily(familyName, description) {
  return {
    type: CREATE_FAMILY,
    familyName,
    description
  }
}

and reducers:

\\ updateModel reducer
const updateModal = (state = false, action) => {
  switch (action.type) {
  case CREATE_FAMILY_MODAL:
    return true;
  case CLOSE_FAMILY_MODAL:
    return false;
  default:
    return state;
  }
};

\\ family reducer
let initialState = {
  isEmpty: true,
  familyName: '',
  description: '',
  persons: [],
  isFetching: false
};

const family = (state = initialState, action) => {
  switch(action.type) {
  case CREATE_FAMILY:
    return Object.assign({}, state, {
      isEmpty: false,
      familyName: action.familyName,
      description: action.description
    });
  default:
    return state;
  }
};

\\ index reducer
const FamilyTreeApp = combineReducers({
  family: family,
  modalIsOpen: updateModal
});

1) After clicking on the menu button, the state changes correctly and a modal window appears, the background is darkened, but the error
invariant.js pops up in the console? 568c: 39 Uncaught Invariant Violation: Stateless function components cannot have refs.
2) After pressing the close button, the state changes correctly, the background becomes normal, but the window does not disappear. Error in the console:
ReactOwner.js?40e0:84 Uncaught TypeError: Cannot read property 'refs' of null
3) when entering data into the input, the same thing happens as in step 2
4) when you click on the create button, the page reloads