two way binding string separated by commas

Question

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?

Chizaram Igolo · Accepted Answer · 2022-05-17T21:32:00.253

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.

Glad I could help! You can use my solution with @ItsGeorge's answer if you prefer to have an array store the `experience` values. I tested both ways and it worked! — Chizaram Igolo, May 17 '22 at 21:34

ItsGeorge · Answer 2 · 2022-05-18T14:27:06.577

0

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.

working code sandbox

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)}
    </>
  );
};

edited May 18 '22 at 14:27

answered May 17 '22 at 20:42

ItsGeorge

2,060
3
17
33

Note in case it's not obvious: `{ ...opportunity, experience }` is using "object literal property value shorthand" because the variable is named `experience` so it's the same as `{ ...opportunity, experience: experience }` – ItsGeorge May 17 '22 at 20:45
thanks for the answer. However this line 'value={opportunity.experience.join(' ')}' in the input field still prevents me to have spaces between the words. It doesn't solve my problem. – Happy Coconut May 17 '22 at 21:23
@HappyCoconut oops, you're right. I updated the example with `useEffect` and included a working code sandbox. – ItsGeorge May 18 '22 at 14:28

two way binding string separated by commas

2 Answers2