Тигран Абрамян

Первый способ наиболее правильный.

return (
   {
      this.state.table.map(row => {
         return <TableRow row={row}/>
      })
   }
)
function TableRow(props) {
   return(
      <tr>
         props.row.map(cell => {
             <td><TableCell /></td>
         })
      </tr>
   )
}

npx create-react-app react-app

then и catch относятся не к React а к JS, так что соответственно такие методы есть.

fetchData = () => {
  fetch(`https://........`)
    .then((response) => response.json())
    .then((data) => {
      const groupedData = data.group;
      this.setState({
        data: groupedData,
        car: Object.keys(groupedData)[0]
      }, this.filter);
    })
    .catch(() => {
      console.log("404 Not Found");
    });
};

Это нормально, смотря как вам хочется.

Допустим создаваем список постов.
В начале создаваем папку Post внутри этой папки - Post.js и Post.css / Post.scss, Это целый отдельный компонент.
Лично мой подход такой.

https://heroku.com

Гугля ошибку, зашел на такой хороший сайт.

https://stackoverflow.com/questions/47928735/react...

Пробуйте некоторые методы.
npm i -g react-scripts
npm update
npm audit fix

rm -rf node_modules && npm install удаляет папку node_modules и заново все восстановливает
Аналогично.
rm -rf node_modules
npm install

react router.
reach router.

Что бы useEffect сработал один раз, только при активаций.
То как вы и сказали нужно передать пустой массив вторым аргументом.

useEffect(() => {
  axios
    .get("http://localhost:3001/api/score")
    .then(response => {
      if (response.data.ok) {
          dispatchDataToState(response.data);
      } else throw new Error("Server side error");
    })
    .catch(err => console.error(err));
}, []);

Думайте о втором аргументе как о зависимости для этого эффекта. Если одна из зависимостей изменилась с прошлого раза, эффект запустится снова.

Предупреждение как таковой не влияет на работу кода и функционал будет работать.

В вашем случае что бы избавиться от предупреждения, просто нужно добавить зависимость внутрь пустого массива.

Или можно просто отключить предупреждение

useEffect(() => {
  // code

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

https://stackoverflow.com/questions/42875949/react...

Смотря какой подход для стилей вы используете в своем проекте.
Если стили пишете на styled-components то да лучше использовать его, а если отдельно подключили - sass, less или простой css то подойдет вариант с css классами.
Или если к примеру в проекте подключен Bootstrap, то почему же не использовать его.
А вообще если проект маленький то лучше использовать старый добрый FlexBox.

Правильный вариант.

let data = [
  {id: 489, name: "Nickname"},
  {id: 345, name: "Email"}
];

<div>
{
  data.map((dat, index) => {
    return (
      <Link>{dat.name}</Link>
    )
  })
}
</div>

В вашем случае ошибка в том что вы в for проверяете
dat.length вместо data.length
и еще
dat[i].name вместо data[i].name