Remove object property inside ReactJs element - using spread syntax

Question

I'm triyng to remove an object property using spread syntax rendering a React component. I wonder if there is a way to achieve without adding to much extra code. I'm using {reset,...inputName}

I have a custom hook (useField) for every input in my form. useField also has a reset function for my reset button. But I want to remove the reset property only for the inputs element.

custom hook useField

export const useField = (type) => {

  const [value, setValue] = useState('')

  const onChange = (event) => {
    setValue(event.target.value)
  }

  const reset = () => {
    setValue('')
  }

  return {
    type,
    value,
    onChange,
    reset
  }
}

react form

const MyForm = (props) => {

  const content = useField('text')
  const author = useField('text')
  const info = useField('text')
 
  const handleClick = () => {
    content.reset()
    author.reset()
    info.reset()
  }

  return (
    <div>
      <h2>create a new anecdote</h2>
      <form onSubmit={handleSubmit}>
        <div>
          content
          <input {reset,...content} />
        </div>
        <div>
          author
          <input {reset,...author} />
        </div>
        <div>
          url for more info
          <input {reset,...info} />
        </div>
        <button>create</button>
        <input type="reset" value='reset' onClick={handleClick} />
      </form>
    </div>
  )

}

You can't delete properties in a spread like that but you can make a function that does it and spread the result for less clutter? — k.tten
– k.tten, Commented Mar 14, 2022 at 19:22
Suppose we have an object like so: const obj = {'a': 10, 'b': 20, 'c': 30, 'd': 40}; and we need to 'remove' prop 'a' using ... spread - it can be done like this: const {a, ...rest} = obj; const newObj = {...rest};. Now, newObj will not have the prop a. If you replace const with let, then instead of newObj, you can say obj itself. So, effectively, 'a' is removed from obj. — jsN00b
– jsN00b, Commented Mar 14, 2022 at 19:25
Please trying changing: const content = useField('text') to const {reset: resetContent, ...content} = useField('text'). I am hoping that reset will no longer be within content. Then, you may use resetContent in your handleClick while using content for JSX. — jsN00b
– jsN00b, Commented Mar 14, 2022 at 19:30
@jsN00b great solution, thanks! It's exactly what i was looking for, avoid to lose much of the benefit provided by custom hooks and spread syntax! — 4aLifeTime
– 4aLifeTime, Commented Mar 14, 2022 at 19:46

jsN00b · Accepted Answer · 2022-03-14 20:03:36Z

1

For future reference, what may work for OP are changes similar to below:

  const { reset: resetContent, ...content} = useField('text')
  const { reset: resetAuthor, ...author} = useField('text')
  const { rest: resetInfo, ...info} = useField('text')
 
  const handleClick = () => {
    resetContent();
    resetAuthor();
    resetInfo();
  };
.
.
.
  <div>
   content
   <input {...content} />
  </div>
.
.
.

Explanation

the object returned from useField is destructured
the reset prop is separated and renamed as resetContent (or resetAuthor, resetInfo, as required)
the rest of the props go into the content variable (or author, info variables, as required)
when rendering in the JSX, the content is used

Thus, effectively the reset prop from useField was 'removed' (technically, it was just separated, though) in the new content object.

answered Mar 14, 2022 at 20:03

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove object property inside ReactJs element - using spread syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related