How to create button like this UI? - reactjs

Question

I am trying to create this button in react.js but can not do this.
My problem is not a CSS is that how to hide and display this button like UI.
This is the button before click:
And this is button after click :
My question is about how to create this toggle button that click on it invisible and show pic 2?
this is my code:
import React, {Component} from "react";
import axios from "axios";
import ContentUploadForm from "../../../dashboardContent/ContentUploadForm";
class UploadContentButton extends Component {
constructor(props) {
super(props);
this.state = {
file : null
};
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onFormSubmit (e) {
e.preventDefault();
const formData = new FormData();
formData.append('filename',this.state.file);
const config = {
headers : {
'content-type' : 'multipart/form-data'
}
};
axios.post("/api/momayezi/uploadFiles/upload" , formData , config)
.then((response) => {
alert("The file is successfully uploaded");
}).catch((error) => {
console.log(error)
})
}
onChange (e) {
this.setState({
file : e.target.files[0]
});
}
render() {
return (
<div className="mt-5">
<div className={"row"}>
<div className={"col-12"}>
<form onSubmit={this.onFormSubmit}>
<input accept={"jpg"} type={"file"} name={"filename"} onChange={this.onChange}/>
<button type={"submit"}>ارسال</button>
</form>
<ContentUploadForm />
</div>
</div>
</div>
);
}
}
export default UploadContentButton

Answer 1

You can have one state variable to toggle the screens.
const Component = () => {
const [showForm, setShowForm] = React.useState(false);
return (
<div>
{showForm ? (
<div>
<div onClick={() => setShowForm(false)}> ← go back </div>
<div className="second"> Form Here </div>
</div>
) : (
<div>
<button className="first" onClick={() => setShowForm(true)}> Click me </button>
</div>
)}
</div>
);
};
ReactDOM.render(<Component />, document.getElementById("app"))
.first {
width: 400px;
border-radius: 10px;
border: 1px solid grey;
}
.second {
width: 400px;
height: 200px;
margin-top: 20px;
border: 1px solid grey;
}
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<div id="app"></div>