CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
StuartDTO
StuartDTO

Reputation: 1051

Hot to hide a component when clicking a Custom Button component

I'm trying to hide a component when clicking a Yes or Not. I'm getting the correct output when clicking but the component that acts like a Popup keeps in the screen and I can not remove it.

This is my component

export default class MyPopUp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let { username } = this.props

    return (
      <div className="modal-wrapper">
        <div className="modal">
          Some Text
          <br />
          <MyButton
            name={username}
            surname="pewlas"
            arguments={["yes"]}
          >
            [ Yes ]
          </PostCommandButton>{" "}
          <MyButton
            name={username}
            surname="pewlas"
            arguments={["no"]}
          >
            [ No ]
          </MyButton>{" "}
        </div>
      </div>
    )
  }
}

And this is MyButton

import { connect } from "react-redux"
import button from "../../../common/components/Button"
import { myButton } from "../actions/myButton"

const MyButton = connect(
  undefined,
  (dispatch, { name, surname, arguments: args = [] }) => ({
    onClick: () => dispatch(button(name, username, args)),
  }),
)(Button)

export default MyButton

And this is my button

export const MY_BUTTON = "MY_BUTTON"
export const myButton = (name, surname, args) => ({
  type: MY_BUTTON,
  name,
  surname,
  arguments: args,
})

How can I hide MyPopUp when clicking Yes or No? I do not find the way to link my PopUp component with the onClick from MyButton, how can I add a state so I can show it or not?

Upvotes: 2

Views: 92

Answers (1)

Samuel Martinez Toledano
Samuel Martinez Toledano

Reputation: 71

I'm going to try to help you maybe refactorizing some code.

First of all, I have seen that you are using redux with your Button, to do what you want to do you have some options:

    const SURNAME = "pewlas"
export class MyPopUpComponent extends React.Component {
  state = { hidden: false }

  handleClick = value => {
    this.props.myButton(this.props.username, SURNAME, value) //the action creator
    this.setState({ hidden: true }) //**IMPORTANT**
  }

  render() {
    const { username } = this.props

    if (this.state.hidden) {
      return null
    }

    return (
      <div className="modal-wrapper">
        <div className="modal">
          Some Text
        <br />
          <button
            name={username}
            surname={SURNAME}
            onClick={() => this.handleClick("yes")}
          >
            [ Yes ]
        </button>{" "}
          <button
            name={username}
            surname={SURNAME}
            onClick={() => this.handleClick("no")}
          >
            [ No ]
        </button>{" "}
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = {
  myButton
}

export const  MyPopUp = connect(null, mapDispatchToProps)(MyPopUpComponent)

You can do something like that, first of all, you show the popup initializing state hidden to false. As you can see in the render you are going to show the text with buttons and as soon as a user press yes or now you can launch an action or do whatever you want and after that, you set hidden to true. The state has changed so the render function is called again returning null, hiding the component.

Hope it helps you

Upvotes: 1

Related Questions