Within my React app, I have an input component that triggers an onChange event when connected to another component:
<input type="text" onChange={onChange} />
Now, I am looking to enhance this input component by incorporating a prop from another component that restricts it to only accept alphabets.
Here's a hypothetical implementation:
<input type="text" onKeyPress={ /* return true or false */ } />
However, the challenge lies in combining these two functionalities seamlessly. How can I achieve this?
const InputComponent = ({ onchange, value, alphabetOnly }) => {
const handleKeyPress = e => {
let alphabet =
(e.charCode > 64 && e.charCode < 91) ||
(e.charCode > 96 && e.charCode < 123);
if (alphabet) {
return true;
}
console.log("stop user from entering that char");
return false;
};
return (
<input
onKeyPress={handleKeyPress}
onChange={onchange}
value={value}
/>
);
};
export default function App() {
const [value, setValue] = useState("");
const handleChange = e => setValue(e.target.value);
return (
<div className="App">
<InputComponent onchange={handleChange} value={value} />
</div>
);
}
You can find this code on CodeSandbox: https://codesandbox.io/s/distracted-cannon-6ueko