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>
  )

}

CodePudding user response：

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.