title: How to set up a conditional required attribute in an input inside a component? Reactjs / Nextjs
body: <p>I Have a simple component that wraps the label and the input together.
  I need like in every form, to some inputs to be required and others to not, but you can't pass a parameter to the <code>required</code> attribute, so you can't give it a <code>true</code> or <code>false</code>. And it gets always the attribute.</p>
  <p>This is the component:</p>
  <pre><code>function Input({ type, name, placeholder, required }) {
  
      return (
          &lt;div className=&quot;inputContainer&quot;&gt;
              &lt;input placeholder={placeholder} type={type} name={name} required={required ? 'true' : 'false'} /&gt;
              &lt;label htmlFor={name}&gt;{placeholder}&lt;/label&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>And this is the calling:</p>
  <pre><code>&lt;Input type='text' name='Name' placeholder='Name' required={false} /&gt;
  </code></pre>
  <p>What is the best way to solve this?</p>