не может diplay данные json в браузере

Question

У меня есть файл testdata.json, который содержит данные json, когда я пытаюсь выполнить приведенный ниже код. Я получаю сообщение об ошибке: «Необходимо вернуть действительный элемент React (или null). вернули undefined, массив или какой-либо другой недопустимый объект ». Что мне теперь делать?

это contestpreview.js файл:

import React from 'react'; 

const ContestPreview = (contest) => { 
    <div className = "contestPreview"> 
    <div> 
     {contest.categoryName} 
    </div> 
    <div> 
     {contest.contestName} 
    </div> 
    </div> 
}; 
export default ContestPreview; 

Это мой app.js файл:

import React from 'react'; 
import Header from './Header'; 

import ContestPreview from './ContestPreview'; 
class App extends React.Component {  
    state= { test : 7}; 
    render(){ 
    return(<div> 
     <div> 
     <Header message = "Naming contests"/> 
     </div> 
     <div>  
     <ContestPreview {...this.props.contests}/> 
     </div> 
    </div> 
); 
    } 
}; 

export default App; 

Это мой index.js файл:

import React from'react'; 
import ReactDom from 'react-dom'; 
import data from './testData'; 
console.log(data); 
import App from './components/App'; 

ReactDom.render(
    <App contest = {data.contest}/>, 
    document.getElementById('root') 
); 

Answer 1

Ваш ContentPreview компонент не возвращают React Компонент. Это небольшая ошибка с вашей стороны, но вы можете исправить это, добавив оператор return или заменив фигурные скобки скобками.

Как так:

const ContestPreview = (contest) => (
    <div className = "contestPreview"> 
    <div> 
     {contest.categoryName} 
    </div> 
    <div> 
     {contest.contestName} 
    </div> 
    </div> 
); 
export default ContestPreview; 

или

const ContestPreview = (contest) => { 
    return (
    <div className = "contestPreview"> 
     <div> 
     {contest.categoryName} 
     </div> 
     <div> 
     {contest.contestName} 
     </div> 
    </div> 
); 
}; 
export default ContestPreview; 

Последняя позволяет добавить некоторую логику приложения перед возвращением, если вы хотите (хотя уныние).

---

Поскольку вы используете лица без функционального компонента, вы можете найти мои previous answer на плюсы/минусы эти интересные.

Удачи вам!