React JS How to make a Button create another Button - reactjs

Question

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!

Answer 1

You can create a state to count the button click, use the for loop to generate the buttons.
import React, {useState} 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();
const [count, setCount] = useState(0);
const generateButton s= () => {
let buttons = [];
for(let i = 0; i < count; i++) {
buttons.push(<MovementButton />);
}
return buttons;
}
return (
<div>
{generateButtons()}
<Button
variant="contained"
className={classes.button}
onClick={() => setCount(count => count + 1)}
startIcon={<AddCircleIcon />}>
Add Movement
</Button>
</div>
);
};