How can i implement a part of js functionality inside react? [SOLVED]

Question

So i have this piece of code (the c.onclick function which changes the backgroundcolor of square written at the last of js file),now I want to implement it in react ,how would I?I have tried putting that piece of code in react in change component but it doesn't works.

https://code.sololearn.com/WkO9mqzBX638/?ref=app

Answer 1

State can be tricky. Somehow the img_add needs a property that tells it whether to render content or nothing (.innerHTML = "")

I'm jotting down a sketch, you need to fill in the details!

function ImageAdder () {
const [clicked, setClicked] = useState(false);

return (<>
<ImgAdd clicked={clicked} />
<AddUrl setClicked={setClicked} />
</>);
}

function ImgAdd (props) {
if (props.clicked)
return (<></>);

return (<img bla bla/>);
}

function AddUrl (props) {
return (
<input type="button" onClick={() => props.setClicked(true)} />
);
}

The power of react then is that as soon as the state changes, the ImgAdd component will be rerendered without you having to do anything.

Answer 2

Schindlabua thks for the response and the info but I was talking about the backgroundcolor thing that was implemented in last part of js file ,it wasn't working when i cut that code and had put it in change_component but I tried again and it works fine as I expected ,actually I was trying to break some other problem into pieces by checking if c.onlick(c being cube here)works same inside component as in js file ,since I have some problem attaching the url to its backgroundImage property and mixed up things ,you might delete this question if you want ,thks again