Пытался сделать какой-то проект для себя, чтобы потренироваться реагировать, потому что я новичок, и у меня возникли проблемы, которые, несмотря ни на что, он не возвращает html из javascript после использования карты внутри карты
import './App.css';
import data from './data.json';
import React from 'react';
function App() {
const keys = Object.keys(data)
return (
<div className="App">
<header className="App-header">
{keys.map(key => {
if (key !== "events"){
return (<h1 className="data">{key} : {data[key]}</h1>);
}else{
data["events"].map(event => {
return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
})
}
})
}
</header>
</div>
);
}
export default App;
Есть ли какая-то причина, по которой это не работает? и как мне это исправить?
эта ветка:
}else{
data["events"].map(event => {
return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
})
}
не возвращает элементы. Тебе нужноreturn data['events'].map...
Сначала вам нужно объявить класс для своего приложения. Затем определите внутри функцию рендеринга для печати HTML в DOM.
Попробуй это:
import './App.css';
import data from './data.json';
import React, {Component} from 'react';
class App extends Component {
render() {
const keys = Object.keys(data)
return (
<div className="App">
<header className="App-header">
{keys.map(key => {
if (key !== "events"){
return (<h1 className="data">{key} : {data[key]}</h1>);
}else{
data["events"].map(event => {
return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
})
}
})
}
</header>
</div>
);
}
}
export default App;
data["events"].map(event => {
поэтому, если оно попадает в ветку else, возвращается undefined. Quentin