Reactjs - Textarea

TextArea - ReactJS Component

Renders an <textarea> element that uses a callback method to pass its value to the parent component.

Use object destructuring to set defaults for certain attributes of the <textarea> element. Render an <textarea> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the text area to the parent.

const TextArea = ({ 
    handleChange, 
    cols = 20, 
    rows = 2, 
    disabled = false, 
    readOnly = false, 
    placeholder='', 
}) => (
    <textarea
      cols={cols}
      rows={rows}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      onChange={({ target : { value } }) => handleChange(value)}
    />
  );

ReactDOM.render(
    <TextArea 
        placeholder='Insert some text here...' 
        handleChange={(val) => console.log(val)}
    />,
    document.getElementById('root')
);