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

Answer

The key to solving this problem is to remember if the button was clicked as yet using React.useState().

Then, use the ternary operator <condition> ? <value if true> : <value if false> to conditionally control what elements need to be rendered.

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

const DEFAULT_IS_CLICKED = false;
function RightBody() {
  const [isClickedYes, setIsClickedYes] = React.useState(DEFAULT_IS_CLICKED)

  const onClickYes = () => {
    setIsClickedYes(true)
  }

  return (
    <div>
      {isClickedYes 
         ? <>
             <input/>
             <input/>
           </>
         : <Button1 onClickYes={onClickYes} />
      }
    </div>
  );
}

Notice how I used a React Fragment <>...</> to wrap your two input boxes. These act like parentheses since you can only return one element at a time (with as many child nodes as you want)