xxxxxxxxxx
/* Parent */
// The Parent creates the function to be used by the Child and
// whenever the Child calls the function, it is triggered from
// the Parent.
const Parent = () => {
const saveProjectFunction = data => {
// Recieving data(object) from the Child, instead of passing
// the object to the Child.
const modData = {
id: 1,
data
}
console.log(`From the Parent ${modData}`);
}
return(
<Child onSaveProject={saveProjectFunction}/>
)
}
// NOTE: YOU CAN'T SKIP INTERMEDIATE COMPONENT
// The way you pass down through each component, is the same way
// You pass up without skipping a component
/* Child */
// The child basically calls the function from the parent which was
// pass in as props, but the function lives and is being used in
// the parent.
const Child = ({ onSaveProject }) => {
const sendData = () => {
const data = {
name: "kouqhar",
sport: "basketball"
}
// Sending the created data(object) to the Parent instead of
// Recieving data from the Parent.
onSaveProject(data)
}
return(
<button onClick={sendData}><button/>
)
}
// With love @kouqhar
xxxxxxxxxx
//[CHILD]: Received data from parent
import { React, useState } from "react";
const Child = (props) => {
const [data, setData] = useState("");
const func = () => {
props.myFunc(data);
};
return (
<>
<input
type="text"
value={data}
onChange={(e) => setData(e.target.value)}
/>
<button onClick={func}>Click</button>
</>
);
};
export default Child;
//[PARENT]:create a callback function in parent
import "./styles.css";
import Child from "./child";
export default function App() {
const receivedData = (data) => {
console.log(data);
};
return (
<div className="App">
<Child myFunc={receivedData} />
</div>
);
}
xxxxxxxxxx
function App() {
return (
<div className="App">
<GrandParent />
</div>
);
}
const GrandParent = () => {
const [name, setName] = useState("i'm Grand Parent");
return (
<>
<div>{name}</div>
<Parent setName={setName} />
</>
);
};
const Parent = params => {
return (
<>
<button onClick={() => params.setName("i'm from Parent")}>
from Parent
</button>
<Child setName={params.setName} />
</>
);
};
const Child = params => {
return (
<>
<button onClick={() => params.setName("i'm from Child")}>
from Child
</button>
</>
);
};
xxxxxxxxxx
Parent:
<div className="col-sm-9">
<SelectLanguage onSelectLanguage={this.handleLanguage} />
</div>
Child:
handleLangChange = () => {
var lang = this.dropdown.value;
this.props.onSelectLanguage(lang);
}
xxxxxxxxxx
import React, { useState } from "react";
let myState = {};
const GrandParent = () => {
const [name, setName] = useState("i'm Grand Parent");
myState.name=name;
myState.setName=setName;
return (
<>
<div>{name}</div>
<Parent />
</>
);
};
export default GrandParent;
const Parent = () => {
return (
<>
<button onClick={() => myState.setName("i'm from Parent")}>
from Parent
</button>
<Child />
</>
);
};
const Child = () => {
return (
<>
<button onClick={() => myState.setName("i'm from Child")}>
from Child
</button>
</>
);
};
xxxxxxxxxx
const NoAuthWebsite = ({ login }) => {
const [userName, setUserName] = useState("");
return (
<form onSubmit={() => login(userName)}>
<input
placeholder="username"
required="required"
onChange={e => setUserName(e.target.value)}
value={userName}
/>
<button type="submit">
submit
</button>
</form>
);
};
xxxxxxxxxx
In Java, data formats refer to the structured representation of data for storage or communication. Commonly used data formats include:
JSON (JavaScript Object Notation): Lightweight, text-based format for exchanging data.
Library: Jackson, Gson
Example: {"name": "John", "age": 30}
XML (Extensible Markup Language): Hierarchical, tag-based format.
Library: JAXB, DOM, SAX
Example: <person><name>John</name><age>30</age></person>
CSV (Comma-Separated Values): Tabular data in plain text.
Library: Apache Commons CSV
Example: John,30
These formats are commonly used for file I/O, API communication, or data serialization.
xxxxxxxxxx
const [markdown, setMarkdown] = useState<string>('');
// Callback function to update markdown state
const handleMarkdownChange = (newMarkdown: string) => {
setMarkdown(newMarkdown);
console.log('handleMarkdown', markdown);
};
//RichTextEditor
<RichTextEditor handleMarkdownChange={handleMarkdownChange} />
interface RichTextEditorProps {
handleMarkdownChange: (markdown: string) => void; // Prop to receive the callback function
}
const RichTextExample = ({ handleMarkdownChange }: RichTextEditorProps) => { ..
// Generate Markdown on editor change
const handleEditorChange = (value: Descendant[]) => {
const markdownContent = value.map(node => slateToMarkdown(node)).join('\n');
setMarkdown(markdownContent); // Update the state with Markdown content
handleMarkdownChange(JSON.stringify(markdownContent));
console.log(JSON.stringify(markdownContent));
};
}
xxxxxxxxxx
/To pass data from child to parent component in React:
//Pass a function as a prop to the Child component.
//Call the function in the Child component and pass the data as arguments.
//Access the data in the function in the Parent.