I am unable render component with click a button

Question

When click a button, it should render an element, but it does not work. If I click, nothing happens, nor does it trigger any error. I'm using material UI

component content is a form

function handleBoxRegister(){
    return (
      <div>test</div>
    )
  }

<Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={handleBoxRegister}
        >
          <AddIcon>
          </AddIcon>
          Registrar paciente
        </Button>

This wont work. You cant `return` a component from a function and expect that to be in added into the render tree. — Rohan Thacker, Jul 05 '21 at 21:06
Tell me more about what you are trying to do, Are you trying to show a component after the form is submitted? If you add more info I can help you with a better answer. — Rohan Thacker, Jul 05 '21 at 21:10
It has a div in the middle of the screen and a sidebar with several buttons, one of which is registration. Then when the user clicks on it, a form should appear in the middle of the screen — pyahri, Jul 05 '21 at 21:12
Yes, but I didn't understand very well, now it made perfect sense, thank you very much — pyahri, Jul 05 '21 at 21:36

score 0 · Answer 1 · answered Jul 05 '21 at 21:27

It has a div in the middle of the screen and a sidebar with several buttons, one of which is registration. Then when the user clicks on it, a form should appear in the middle of the screen.

This is where state comes in, to make the form appear/disappear from the view you should can store the data (state) in a boolean variable and check if that is true or false then in the render show it or hide it as per the value of the variable.

Below we are using the && operator, which will render the component after it only if the first value is true.

For example:


function exmapleView (props) {
  const [isRegisterShown, setIsRegisterShown] = useState(false);
  return (
    <div>
      <Sidebar>
        <Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={() => setIsRegisterShown(true)}>
      </Sidebar>
      {isRegisterShown && <div>// Add the Register Form</div>}
      // Add Other Components here
    </div>
)
}

Consider marking it as the accepted answer and upvoting. So we can help others with the same question on StackOverflow — Rohan Thacker, Jul 05 '21 at 21:38

I am unable render component with click a button

1 Answers1