Make one variable show up in a different component using TS and React
Archived 3 years ago
J
Jonathan
Verified
Evening, I am using react with Typescript.
My question is, why cant I simply read a variable when trying to use it in another component? I have 2 components here, 1. Learned.tsx and 2. SubmitData.tsx.
My goal is to display the variable `bodyContent` from SubmitData.tsx (line 13) in the paragraph element of Learned.tsx. Learned.tsx is the Parentcomponent and SubmitData.tsx is the Childcomponent
Here is the code:
Learned.tsx:
```ts
import SubmitData from "./SubmitData/SubmitData";
import "./Learned.css";
function Learned(props: any) {
let bodyContent = props.bodyContent;
return (
<div className="containerLearned">
<div className="containerLeft">
<SubmitData setBodyContent={props.setBodyContent} />
</div>
<div className="containerRight">
<p>{bodyContent}</p>
</div>
</div>
);
}
export default Learned;
```
SubmitData.tsx:
```ts
import { useState } from "react";
import "./SubmitData.css";
function SubmitData(props: any) {
const [body, setBody] = useState({ value: "" });
const [header, setHeader] = useState({ value: "" });
// const [body, setBody] = useState("");
const clickHandle = (event: any) => {
event.preventDefault();
console.log("You clicked the button");
};
let bodyContent = body.value;
return (
<div className="create">
<form>
<input
type="text"
required
value={header.value}
onChange={(e) => setHeader({ value: e.target.value })}
></input>
<textarea
required
value={body.value}
onChange={(e) => setBody({ value: e.target.value })}
></textarea>
<button onClick={clickHandle}>Submit</button>
</form>
</div>
);
}
export default SubmitData;
```