How to add a Height property to a custom React Component

Question

Hey I am creating a React Form which has two TextBoxes. I have created a Custom Textbox but I want them of different height how can I achieve this ?

form.js

 <Label>Job Description</Label>
            <Textarea
              type="textarea"
              name="description"
              focus={isFocused}
              value={description}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />
            <Label>Job Requirements</Label>
            <Textarea
              type="textarea"
              name="requirement"
              focus={isFocused}
              value={requirement}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />

styled component

const Textarea = styled.textarea`
  width: 100%;
  border: 1px solid #d3d3d3;
  outline: none;
  resize: none;
  transition: 0.1s ease-out;
  height: 80px;
  background-color:white;

`;

Right now I have assigned the height to 80px but I want the Job requirement text box to be 40px

Answer 1

You can configure it via props

<Textarea type="textarea" name="description" height="40px" />
<label>Job Requirements</label>
<Textarea type="textarea" name="requirement" height="80px" />

and then

const Textarea = styled.textarea`
 width: 100%;   
 border: 1px solid #d3d3d3;
 outline: none;  
 resize: none; 
 transition: 0.1s ease-out; 
 height: ${(props) => props.height};  
 background-color: white; `;

Check my sandbox