title: How to design resuable react component
body: <p>I am using React for my project. Firstly, I need to design a resuable <code>Input</code> component. Here is my code: </p>
  
  <pre><code>import React from "react";
  import TextField from "@material-ui/core/TextField";
  const Input = ({
    name,
    value,
    label,
    errorMessage,
    type,
    onChange,
    fullWidth
  }) =&gt; {
    return (
      &lt;TextField
        name={name}
        value={value}
        label={label}
        helperText={&lt;span style={{ color: "red" }}&gt;{errorMessage}&lt;/span&gt;}
        type={type}
        onChange={onChange}
        margin="normal"
        fullWidth={fullWidth}
      /&gt;
    );
  };
  </code></pre>
  
  <p>For this component, I totally pass <code>seven</code> props. However, some of props like <code>name</code>, <code>type</code> and <code>fullWidth</code> they are more like a <code>config</code>. My question is that should I pass these props directly, or should I wrap these three props in an <code>others</code> props like this:</p>
  
  <pre><code>const Input = ({
    value,
    label,
    errorMessage,
    onChange,
    others
  }) =&gt; {
    return (
      &lt;TextField
        value={value}
        label={label}
        helperText={&lt;span style={{ color: "red" }}&gt;{errorMessage}&lt;/span&gt;}
        onChange={onChange}
        margin="normal"
        {...others}
      /&gt;
    );
  };
  </code></pre>
  
  <p>It might make other developers more flexible to use this component ?</p>