This is my object:
const [opportunity, setOpportunity] = useState({
name: '',
description: '',
experience: '',
});
I want to store it in the opportunity experience property like a string separated by commas. Like this for example: 'experience_1,experience_2,experience_3'.
But when i type in the input field i want to be able to have space between the words. Like this for example: experience_1 experience_2 experience_3
this is my code for the input field:
<InputField
type='text'
value={opportunity.experience.split(',').join(' ')} // i think i need changes here
onChange={(e) => setOpportunity({ ...opportunity, experience: e.currentTarget.value.split(" ").filter(x => x !== '').toString() })} // i think this works
label={"Experiences"}
/>
Any Help Guys?
Replace .filter(x => x !== '') with .replace(/\s+/g, " ") and place it before you call the .split() method. This will replace multiple spaces with a single space, and prevent the user from entering in more than one space at a time, while letting them change the contents of your InputField component. Remember, .filter() works on a cloned copy of the string while .replace() works on the string itself, which in this case is the event current target value.
Now it should work as intended.
Like so:
<InputField
type="text"
value={opportunity.experience
.split(",")
.map((x) => x.trim()) // Added .trim() to keep consistent spacing...
.join(" ")} // ...before joining
onChange={(e) => {
setOpportunity({
...opportunity,
experience: e.currentTarget.value
.replace(/\s+/g, " ") // If you try to use .filter() here, it won't work
.split(" ")
.toString(),
});
}}
label={"Experiences"}
/>
I've also chained a trim operation on each value from the state property with .map() to keep the spacing consistent during presentation, in the event that the state property was initialized with lots of spaces in between each experience value.
Here's an updated example of my previous answer using useEffect to update the state based on the input value. This keeps the input value and the state value separate.
import React from "react";
export default function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
const MyComponent = () => {
const [opportunity, setOpportunity] = React.useState({
name: "",
description: "",
experience: []
});
const [experienceValue, setExperienceValue] = React.useState("");
React.useEffect(() => {
const experience = experienceValue.split(" ").filter((x) => x !== "");
setOpportunity({ ...opportunity, experience });
}, [experienceValue, opportunity]);
const handleInput = (e) => {
setExperienceValue(e.currentTarget.value);
};
return (
<>
<input type="text" value={experienceValue} onChange={handleInput} />
<br />
{JSON.stringify(opportunity.experience)}
</>
);
};