Pass Data between React Components

Day 27 #100DaysOfCode #React

Làm thế nào để chuyển dữ liệu giửa các Component trong React. Là một vấn đề rất quan trọng, nên nay mình tìm hiểu sơ sơ qua về vấn đề này, để hiểu về nó

Đầu tiên mình cần tạo một project nhỏ, mình chạy câu lệnh dưới đây: 

npx create-react-app name_project

//State the development server
cd name_project
npm start

//Build project 
# npm run build 

Mọi người có thể xem lại bài viết : Getting Started With React

Sau khi tạo xong bạn hãy tạo file theo đường dẫn sau:

+ /src/components/PassDataParentChild/Parent.js : viết code cho Component Parent

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [name, setName] = useState("Hokage Hoa");
  const products = [
    {
      id: 1,
      title: "Cafe"
    },
    {
      id: 2,
      title: "Coca"
    }
  ];

  // const [products, setProducts] = useState(products);
  const changeName = (name) => {
    setName(name);
  };
  return (
    <>
      <h2>Parent</h2>
      <Child name={name} changeName={changeName} products={products} />
    </>
  );
};
export default Parent;

Đoạn code bên trên mình có gửi data từ component Parent đến component Child

<Child name={name} changeName={changeName} products={products} />

Okay, giờ tiếp theo ta hãy tạo component Child để nhận data từ component Parent thôi

+ /src/components/PassDataParentChild/Child.js

import React, { useEffect } from "react";

const Child = ({ name, changeName, products }) => {
  useEffect(() => {
    console.log(products);
  }, []);
  return (
    <>
      <h2>Child</h2>
      <span>Name: {name}</span>
      <br />
      <br />
      <button onClick={() => changeName("Hokage Skipperhoa")}>
        Change Name
      </button>
      <p>---------------------------------------------</p>
      <label>List products</label>
      <ul>
        {products.map((item, key) => (
          <li key={key}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};
export default Child;

Code trên mình cần khai báo nhận biến từ component Parent gửi qua như sau : 

const Child = ({ name, changeName, products }) => {
  
};
export default Child;

Ta có thể sử dụng các biến trên một cách bình thường, hoặc viết sự kiện onClick gửi dữ liệu từ component Child  đến component Parent, để cập nhật lại giá trị biến name ở component Parent

 <button onClick={() => changeName("Hokage Skipperhoa")}>
        Change Name
      </button>

Okay, về việc cấu hình gửi data từ Child->Parent, và từ Child->Parent đã xong, giờ ta hãy gọi component Parent trong file App.js

+ src/App.js

import React from "react";
import Parent from "./components/PassDataParentChild/Parent";
const App = () => {
  return (
    <>
      <Parent />
    </>
  );
};
export default App;

Như bên trên cũng chưa phải là cách duy nhất hoặc hay, từ từ mình tìm hiểu thêm và chia sẻ với mọi người tiếp.