How to use this react component efficiently? - reactjs

Question

In my react application, I create this CreateText component, which is used to write a post or comment on a post. This is the component.
import React from 'react';
import PropTypes from 'prop-types';
import { Header, TextAreaFieldGroup, Button, Spinner } from '../UI';
const CreateText = props => {
const { createPostData, textCreating, onInputChange, onCreateText } = props;
const setButtonText = () => {
let content = <Header Tag='span' text={createPostData.buttonText} />;
if (textCreating)
content = <Spinner width={20} height={20} borderWidth={4} borderTopWidth={4} />;
return content;
}
return (
<div className="post-form mb-3">
<div className="card card-info">
<div className="card-header bg-info text-white">
{createPostData.header}
</div>
<div className="card-body">
<form onSubmit={onCreateText}>
<div className="form-group">
<TextAreaFieldGroup
placeholder={createPostData.placeholder}
name={createPostData.name}
value={createPostData.text}
error={createPostData.error}
onChange={onInputChange}
/>
</div>
<Button
type='submit'
className='btn btn-dark col-md-2'
disabled={textCreating}
>
{setButtonText()}
</Button>
</form>
</div>
</div>
</div>
);
}
CreateText.propTypes = {
createPostData: PropTypes.object.isRequired,
onInputChange: PropTypes.func.isRequired,
onCreateText: PropTypes.func.isRequired
}
export default CreateText;
I didn't use a local state for this component. I used onInputChange() prop and implemented on the 2 parent components which I had used this component. My question is, what is the best way to implement this component? Having a state inside the component and use onChange() inside the component? Or pass it as a prop and implement in the parent component? Everywhere I used the approach that I have shown here. Which is the better approach?

Answer 1

If your verification for TextAreaFieldGroup is complex, your solution is good in this case. Because TextAreaFieldGroup receive createPostData from it parents.
If your verification is simple, just keep value on component's state and verify within component.
I just wondering why your form just has only one text field? If your form has more than one field, the best practice is using render-props pattern