I can't Change text in the form in React - reactjs

Question

I am Learning React and i want to work with forms. Initally i gave value "hello" in the form but i couldn't erase it and type anything in the form.
import { React, useState } from "react";
const App = () => {
const [num, setNum] = useState(0);
const handleClick = () => {
setNum(num + 1);
};
const mew = () => {
console.log("submiited");
};
return (
<div className="bg-green-500 text-center">
<h1 className="bg-red-200">
🎰 Welcome to <span> Slot Machine game</span> 🎰{" "}
</h1>
<h1></h1>
<button
onClick={handleClick}
className="bg-red-200 w-92 mt-4 mb-4 rounded-full p-2 text-center"
>
Click
</button>
<h1>{num}</h1>
<form className="form" onSubmit={mew}>
<div className="form-control">
<label htmlFor="firstName">Name : </label>
<input
className="mb-2"
type="text"
name="txt"
value="Hello"
onChange={(e) => {
console.log(e.target.value);
}}
/>
</div>
</form>
</div>
);
};
export default App;

Answer 1

This could be work
import React, { useState } from 'react';
import './style.css';
const App = () => {
const [num, setNum] = useState(0);
const [name, setName] = useState('Hello');
const handleClick = () => {
setNum(num + 1);
};
const mew = () => {
console.log('submiited');
};
return (
<div className="bg-green-500 text-center">
<h1 className="bg-red-200">
🎰 Welcome to <span> Slot Machine game</span> 🎰{' '}
</h1>
<h1></h1>
<button
onClick={handleClick}
className="bg-red-200 w-92 mt-4 mb-4 rounded-full p-2 text-center"
>
Click
</button>
<h1>{num}</h1>
<form className="form" onSubmit={mew}>
<div className="form-control">
<label htmlFor="firstName">Name : </label>
<input
className="mb-2"
type="text"
name="txt"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
</div>
</form>
</div>
);
};
export default App;

Answer 2

You are trying to use controlled inputs but not doing that correctly. When using controlled inputs, you feed the value in the input field, and it is your responsibility to change the value.
useState can help you do this.
const App = () => {
const [num, setNum] = useState(0);
const [textValue , setTextValue] = useState("hello");
const handleClick = () => {
setNum(num + 1);
};
const changeText = (e) => {
setTextValue(e.target.value);
}
const mew = () => {
console.log("submiited");
};
return (
<div className="bg-green-500 text-center">
<h1 className="bg-red-200">
🎰 Welcome to <span> Slot Machine game</span> 🎰{" "}
</h1>
<h1></h1>
<button
onClick={handleClick}
className="bg-red-200 w-92 mt-4 mb-4 rounded-full p-2 text-center"
>
Click
</button>
<h1>{num}</h1>
<form className="form" onSubmit={mew}>
<div className="form-control">
<label htmlFor="firstName">Name : </label>
<input
className="mb-2"
type="text"
name="txt"
value={textValue}
onChange={changeText}
/>
</div>
</form>
</div>
);
};
export default App;