Home Am trying out react with a simple counter. Within the console.log it works perfectly but within the user interface it doesn't update the counter

Questions

Am trying out react with a simple counter. Within the console.log it works perfectly but within the user interface it doesn't update the counter

byMR

July 22, 2022

I have code in my Trick.js file as follows:

let counter = 0;
const handlesclick = () => {
counter++;console.log("counter", counter)
Trick();
};
export default function Trick() {
return (
 <div>  
 <div>  
 <button onClick={handlesclick}>Increment counter</button>  
 </div>  
 <div>  
      counter value is {counter}  
 </div>  
 </div>  
  )  
}

and it is being rendered by index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Jsx from './Jsx'
import Tools from './Tools';
import Trick from './Trick';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Jsx />
    <Tools name="Ishmo" tool="Adobe"/>
    **<Trick />**
  </React.StrictMode>
);

The counter in console works perfectly but on user interface it doesn’t.
Please help me out

>Solution :

try this

import { useState } from "react";


export default function Trick() {

const [counter, setCounter] = useState(0);
const handlesclick = () => {
setCounter(counter + 1);
console.log("counter", counter)
};


return (
<div>  
<div>  
<button onClick={handlesclick}>Increment counter</button>  
</div>  
<div>  
  counter value is {counter}  
</div>  
</div>  
 )  
}