確診了TAT，覺得完賽越來越困難與遙遠了。

今天要來討論的是react的資料綁定，最最簡單的就是第二天寫Hello Andy的時候，在{}裡面放入變數。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

或是我們使用Props來傳遞值

function Welcome(props) {
  return (
  <div>
    <h1>Hello {props.name}</h1>
    <h2>i'm {props.me}</h2>
  </div>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" me="James"/>;
root.render(element);

當然也有State

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

不過，我們實際上在撰寫一個網站的時候，很常見的其實是後端傳來一包json的資料，然後我們要把整包資料呈現到前端頁面上。
比如這樣的資料(一樣都是react官網的範例)

{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}

像這樣的資料，他們的版面都會長的一樣，只是帶入的資料不同而已。
(比如公告，每一條公告都是一樣的格式，但不同內容；電商的商品列表，都是一樣的樣子，只是不同的商品名稱價格)
那麼，老樣子，我們就來看一下怎麼綁定資料吧，一樣可以略過長長的程式碼。

function Blog(props) {
  const content = props.posts.map((post) =>
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Blog posts={posts} />);

首先，我們需要先要先把資料建好，這步驟很簡單，就是建個陣列來存資料。

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

接著，把資料綁到我們想放的地方。
在這裡，我先用一個更簡化的範例：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<ul>{listItems}</ul>);

這個listItems用.map的方法，迭代了numbers這個陣列。(map()是js的方法，並不是react獨創的新玩意。)

上面這個範例，會呈現一個1到5的list。重點就是透過map()迭帶我們的data，然後把他綁到jsx上面。

那麼回到我們原本的例子，在我們的例子裡面，因為是個object，有不同的屬性，所以我們這次{}裡面不能只寫一個number，而是必須放上我們在每一個位置要呈現綁定的屬性資料。
如此一來，我們就可以成功將資料綁定到我們頁面上了！

function Blog(props) {
  const content = props.posts.map((post) =>
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {content}
    </div>
  );
}

不過以上的案例還有些不完整，一些注意事項也還沒提，但到目前為止，我們已經可以順利的將資料好好呈現了，剩下的，我們就明天見吧！