map

import React from 'react';
import { useState, useEffect } from 'react';

export default function Home() {
  const [tasks, setTasks] = useState(() => {
    const savedata = localStorage.getItem('tasks');
    return savedata ? JSON.parse(savedata) : [];
  });
  const [input, setInput] = useState('');

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (input.trim() === '') return;
    setTasks([...tasks, input]);
    setInput('');
  };

  const deleteTask = (index) => {
    const newTask = [...tasks];
    newTask.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <>
      <ul>
        // map関数内にHTMLタグを入れるので、
        // (task, idx)=>の後は{}ではなく()とすること
        // 逆に{}内はJSの世界なのでtasks.mapが書ける
        {tasks.map((task, idx) => (
          <li key={idx}>
            {task}
            <button onClick={() => deleteTask(idx)}>削除</button>
          </li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="fill out task" />
        <button onClick{addTask} >追加</button>
      </div>
    </>
  );
}

import React from 'react';

export default function Home() {
  const array = [
    {
      title: 'タイトル1',
      date: '2025/01',
    },
    {
      title: 'タイトル2',
      date: '2025/02',
    }
  ];
  return (
    <ul>
      {array.map((element) => (
        <li>
          {element.title}
          {element.date}
        </li>
      ))}
    </ul>
  );
}