I just want to know if i did this right, regarding js and react script

function clickfunction() {
const p = document.querySelector('.container')
p.styles.padding = "50px";
}

export function App2() {
return <div>
<p>Hello Again</p>

<div>

<p onclick="clickfunction" className="container1">djskahdasfklaskl</p>
</div>
</div>

}

chrono1913OP•9/27/22, 12:50 AM

so basically i want to create a function that will active on click so I placed the onclick in the <p> tag and the className. I want to click on the text and make the text padding 50px

chrono1913OP•9/27/22, 1:10 AM

I also tried something like this

const p = document.querySelector('.container1')
const ptag = document.querySelector('.ptag')
p.addEventListener('click',
ptag.styles.padding = "50px"
)

chrono1913OP•9/27/22, 1:54 AM

so stuff like add eventlistner and all those other function wont work?