I have an application where in some cases I am lifting the state to the closest ancestor. however, I came across an instance where I am lifting some of the states and leaving others locally. Is this a good practice? Does it make confusing long term?
textField Component
export const FieldInput = props => {
// local
const {
inputId,
inputLabel,
inputValue,
} = props;
return(
<>
<TextField
id={inputId}
label={inputLabel}
value={inputValue}
className={props.classes.textField}
onChange={props.handleChange}
data=""
/>
</>
)
}
export default withStyles(styles)(FieldInput);
closest ancestor with lifted state
const [textState, setTextState] = useState({
textTitle: "Please Provide Title",
textRequiermentPoc: "Please Provide POC",
textDirectingRequierment: "",
textRequiermentDescription: "",
});
const handleTitleText = (event) => {
setTextState({
textTitle: event.target.value,
})
}
const handleRequiermentPocText = (event) => {
setTextState({
textRequiermentPoc: event.target.value,
})
}
INPUT FORM
<FieldInput
inputLabel={"Requirement point of contact"}
inputId={"requiermentPOC"}
inputValue={textState.textRequiermentPoc}
handleChange={handleRequiermentPocText}>
</FieldInput>