How to show check icon on selected p tag in React.js

Question

I want to show the check icon on the selected p tag like this

How To Solve this problem

How to show the check icon on the selected p tag

Answer 1

I hope that you're looking like this

Here is sample code for that Refer working code here

 import "./styles.css"; import { useState } from "react"; export default function App() { const [checked, setChecked] = useState(false); return ( <div className="App"> <div className="text" onClick={(event) => { event.preventDefault(); setChecked(;checked); }} > <p>Regularly</p> <div class="round"> <input type="checkbox" checked={checked} id="checkbox" /> <label for="checkbox"></label> </div> </div> </div> ); }

 .App { font-family: sans-serif; text-align: center; }.text { padding: 0 10px; border-radius: 8px; display: flex; background-color: gray; width: 80%; justify-items: baseline; align-items: baseline; }.round { margin-left: auto; margin-right: 4px; position: relative; }.round label { background-color: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; height: 24px; left: 0; position: absolute; top: 0; width: 24px; }.round label:after { border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 5px; opacity: 0; position: absolute; top: 6px; transform: rotate(-45deg); width: 12px; }.round input[type="checkbox"] { visibility: hidden; }.round input[type="checkbox"]:checked + label { background-color: black; border-color: black; }.round input[type="checkbox"]:checked + label:after { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>