React JS How to make a Button create another Button

So I have an "Add" button that, once clicked, I want to open another button in which the user can add some text. The reason the second (newly opened) button is a button is because it will serve as a link to another page. If anyone cares to know, I'm trying to build an app where people can track certain exercises/movements. This first page will be where they write in the names of the movements they want to track.

Here is the code I have for the "Add" button:

import React from 'react';  import Button from '@material-ui/core/Button';  import { makeStyles } from '@material-ui/core/styles';  import AddCircleIcon from '@material-ui/icons/AddCircle';    const useStyles = makeStyles((theme) => ({    button: {      margin: theme.spacing(1),      background: '#C4C4C4',      fontFamily: 'PT Sans Caption',      fontSize: '18px',      borderRadius: '10px',      padding: '20px',      marginTop: '50px',      width: '700px'    },  }));    export default function AddMovementButton() {    const classes = useStyles();      return (      <div>        <Button          variant="contained"          className={classes.button}          startIcon={<AddCircleIcon />}>          Add Movement        </Button>      </div>    );  };  

Here is the code for the button that I would like to appear after the "Add" is clicked:

import React from 'react';  import Button from '@material-ui/core/Button';  import { makeStyles } from '@material-ui/core/styles';    const useStyles = makeStyles((theme) => ({      button: {          margin: theme.spacing(1),          background: '#C4C4C4',          fontFamily: 'PT Sans Caption',          fontSize: '18px',          borderRadius: '10px',          padding: '20px',          marginTop: '50px',          width: '700px',      },      newMovement: {          border: 'none',          padding: '10px',          fontFamily: 'PT Sans Caption',          fontSize: '18px',          borderRadius: '10px',        }  }));    export default function MovementButton(props) {      const classes = useStyles();      //const [ exercise ] = useState(props.exercise)        return (          <Button              variant="contained"              className={classes.button}>              <input type="text" placeholder="Enter Movement Here" className={classes.newMovement}/>          </Button>      );  };  

Here is a picture of what I have on my browser. The two buttons that say "Enter Movement Here" are there because I called them in the home page. The goal would be for the homepage to start with just the "Add Movement" button and then grow as the user adds movements.

If I left out any needed info just let me know, and also I'm fairly new to coding so any other tips/corrections would be appreciated. Thanks guys!

https://stackoverflow.com/questions/66575503/react-js-how-to-make-a-button-create-another-button March 11, 2021 at 10:07AM