Im trying to add an onClick function on the button so if the user clicks Yes, it removes the two buttons then add two new inputs field react js

this is the first code with the buttons elements

import React, { useState } from "react";
import "./button.css";

function Button1() {
  return (
    <div className="buttons">
      <button>yes</button>
      <button>No</button>
    </div>
  );
}

export default Button1;

while this is where the button component is called and rendered, i think this is where the logic will happen

import React from "react";
import styled from "styled-components";
import Button1 from "./button/Button1";
import Button2 from "./button/Button2";
import Button3 from "./button/Button3";
import CardContent from "./CardContent";


function RightBody() {
  return (
    <Card>
      <SmallCircle />
      <Div>
        <CardContent number={"1."} title={"Course of study in school:"} />
        <CardContent number={"2."} title={"Are you a student?"} />
        <Button1 />
        <Sec1>
          <CardContent number={"3."} title={"Did you graduate?"} />
          <Button2 />
        </Sec1>
        <Sec2>
          <CardContent number={"4."} title={"Did you graduate?"} />
          <Button3 />
        </Sec2>
      </Div>
    </Card>
  );
}

export default RightBody;

again what I want to do is that onClick of the yes button, I want to display two input fields instead of the two buttons originally there. Theres going to be a little icon by the side of the newly created input fields which when clicked takes the user back to the first case which is the two Yes and No buttons

const Div = styled.div`
  margin-top: -6%;
`;
const Card = styled.div`
  position: absolute;
  width: 659px;
  height: 684px;
  left: 650px;
  top: 220px;
  background: #ffffff;
  box-shadow: 0px 4px 29px #f0f3ff;
  border-radius: 35px;
  &:hover {
    border: 1px solid blue;
  }
`;
const SmallCircle = styled.div`
  position: absolute;
  height: 32px;
  width: 32px;
  left: 92%;
  top: 3%;
  border-radius: 0px;

  background: linear-gradient(180deg, #800165 0%, #d3014e 100%);
  border-radius: 50px;
  &:hover {
    border: 1px solid blue;
  }
`;
const Sec1 = styled.div`
  margin-top: -11%;
`;
const Sec2 = styled.div`
  margin-top: -12%;
`;

This is my styles for the RightBody component this is how it should be befor the click

then after the click this

Via Active questions tagged javascript - Stack Overflow https://ift.tt/zkwfZmh