How to break down component and make sub component in reactjs? - reactjs

Question

{
this.state.editMode
?
<Card.Body>
<Form>
<Form.Group>
<Form.Control id="des" as="textarea" rows={3} placeholder="Description"
value={this.state.description}
onChange={(des) => {
this.setState({description: des.target.value})
}}/>
</Form.Group>
<Form.Group>
<Form.Control id="link" type="text" placeholder="Link (Optional)"
value={this.state.link}
onChange={(link) => {
this.setState({link: link.target.value})
}}/>
</Form.Group>
</Form>
</Card.Body>
:
<Card.Body>
<p className="cardBody alignLeft">{this.state.description}</p>
<a href={"https://" + this.state.link}
target="#">{this.state.link}</a>
</Card.Body>
}
I want to make two sub component here. One for if editmode is true and another if editmode is false.
But problem is that, this subcomponent also need to use the state variable of parent class. And also, if i change something on sub component, parent components state need to be changed. How can I do that?

Answer 1

You need to pass the state of the parent as props for the child component, which is a standard practice as mentioned here - https://reactjs.org/docs/lifting-state-up.html
If you want to change the state of the parent within the child, you can also pass a function as a prop to the child. The call to the function in child component will trigger state change in parent.
https://dev.to/vadims4/passing-down-functions-in-react-4618
A better way for large component trees is through use of dispatch via React context. This is explained in
https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

Answer 2

As others suggested, you can pass state as props and setState as a prop as well to update parent from child.
Here is an example that might help you understand how to split components and passing values and setState using props.
Note: I have used React Hooks, you can modify it based on class based components.
import React, { useState } from "react";
const App = () => {
const [editMode, setEditMode] = useState(false);
const [data, setData] = useState({
description: "",
link: ""
});
const editModeHandler = (key, value) =>
{
setData((prevState) =>
{
return {...prevState, [key]: value}
})
//setEditMode(true)
};
return <div className="App">{editMode
? <GroupOne value = {description} change = {editModeHandler}/>
: <GroupTwo value = {link}/>}</div>;
};
export default App;
/*Edit Mode True*/
const GroupOne = (props) => {
const { value, change } = props;
return (
<Card.Body>
<Form>
<Form.Group>
<Form.Control
id="des"
as="textarea"
rows={3}
placeholder="Description"
value={value}
onChange={(des) => change("description",des.target.value)}
/>
</Form.Group>
<Form.Group>
<Form.Control
id="link"
type="text"
placeholder="Link (Optional)"
value={value}
onChange={(des) => change("link",des.target.value)}
/>
</Form.Group>
</Form>
</Card.Body>
);
};
/*Edit Mode False*/
const GroupTwo = (props) => {
const { value } = props;
return (
<Card.Body>
<p className="cardBody alignLeft">{value}</p>
<a href={"https://" + value} target="#">
{value}
</a>
</Card.Body>
);
};

Answer 3

You should create a second component and pass the state variables as to the second components. For more information read this documentation https://reactjs.org/docs/components-and-props.html