ReactJS Lifting State fully or Partally

Viewed 27

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>
0 Answers
Related