Task 3025

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

Task 3025

Arnold

APP.js

import olympicGamesResult from './olympicGamesResult.js';
import CountryResults from './components/CountryResults.js';

function App() {
  return <div>
              <CountryResults{...olympicGamesResult[0]} />
              <CountryResults{...olympicGamesResult[1]} />
        </div>;
}

export default App;

CountryResults.js

import React from "react";

function CountryResults(olimp) {
    return <div>
            <h2>
            {olimp.country} 
            </h2>
            <ul>
               <li>
                Gold: {olimp.medals.gold}
                </li> 
                <li>
                Silver: {olimp.medals.silver}
                </li> 
                <li>
                Bronze: {olimp.medals.bronze}
                </li> 
                <li>
                Total: {olimp.medals.gold + olimp.medals.silver + olimp.medals.bronze}
                </li> 
            </ul>
            </div>;
    

}

export default CountryResults;````

Arnold

Подскажите, куда копать.
Результат в браузер выводится правильно.

Coderslang_Master

Arnold похоже что ошибка в импорте.

Если ты не менял olympicGamesResult.js, то должно быть так.

import { olympicGamesResult } from './olympicGamesResult';

Если ты изменил на дефолт экспорт, то верни как было или возможно проще всего будет удалить папку с задачей и начать заново.

Arnold

изменил, как было.
Ошибки в проверке результата теже.

Coderslang_Master

Arnold тут - ошибка, потому что olympicGamesResult - это обычный экспорт, а не default.

import olympicGamesResult from './olympicGamesResult';

Arnold

function CountryResults(olimp) {
    return <div>
                <h2>
                {olimp.country} 
                </h2>
                <ul>
                    <li>
                        Gold: {olimp.medals.gold}
                        </li> 
                        <li>
                        Silver: {olimp.medals.silver}
                        </li> 
                        <li>
                        Bronze: {olimp.medals.bronze}
                        </li> 
                        <li>
                        Total: {olimp.medals.gold + olimp.medals.silver + olimp.medals.bronze}
                    </li> 
                </ul>
        </div>;
    
}

export default CountryResults;

import React from 'react';
import { olympicGamesResult } from './olympicGamesResult';
import CountryResults from './components/CountryResults';

function App() {
  console.log(olympicGamesResult);
  return <div>
              <CountryResults{...olympicGamesResult[0]} />
              <CountryResults{...olympicGamesResult[1]} />
        </div>;
}

export default App;

Ошибки:

amati

Arnold после того, как добавить import React from 'react' в файл компонента CountryResults все тесты проходят

Arnold

РЕЗУЛЬТАТ:

Прошу пояснить, что не так?

Coderslang_Master

Arnold в CountryResults есть import React from 'react';?

Solomon

Добавлю от себя (так как сам столкнулся с этой проблемой), в этом разделе важно понимать разницу между просто export и default export (почитайте в инете). Соответственно импорт простого export будет import { someName } from './someDir', а импорт default export будет import someName from './someDir'.

CountryResults.js
import React from 'react';

function CountryResults({country, medals}) {
    return <div>
                <h2>{country}</h2>
                <ul>
                    <li>Gold: {medals.gold}</li>
                    <li>Silver: {medals.silver}</li>
                    <li>Bronze: {medals.bronze}</li>
                    <li>Total: {medals.gold + medals.silver + medals.bronze}</li>
                </ul>
            </div>
}
export default CountryResults;

App.js
import React from 'react';
import { olympicGamesResult } from './olympicGamesResult';
import CountryResults from './components/CountryResults';

function App() {
  return <div>
        <CountryResults country={olympicGamesResult[0].country} medals={olympicGamesResult[0].medals}/>
        <CountryResults country={olympicGamesResult[1].country} medals={olympicGamesResult[1].medals}/>
    </div>;
}

export default App;