Dzięki, możesz to napisać prościej?
Jestem naprawdę świeży w tym temacie, o React trochę poczytałem i zrobiłem najprostsze rzeczy, ale tego nie ogarniam.
Jeżeli definiuję klasę, która ma mi wyświetlić tabelę to mam taki kod
CODE
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentWillMount() {
console.log('this is called before render!');
}
render() {
return (
<table>
<tbody>
{this.props.data.map((item, index) => {
return <tr><td key={item.firstName}>{item.firstName}</td><td key={item.lastName}>{item.lastName}</td><td key={item.id}>{item.id}</td><td key={item.dateOfBirth}>{item.dateOfBirth}</td><td key={item}>{item.companyName}</td><td key={item.note}>{item.note}</td></tr>;
})}
</tbody></table>
);
}
}
W tym jest błąd bo tr-y nie mają kluczy, poza tym w ostatecznej wersji będę brał dane z tablicy a nie obiektu. Ale tak jest chyba najprościej, przynajmniej na moim poziomie.
Rzecz w tym, że w zależności od opcji (czyli stanu jakiegoś przycisku) albo wszystko będzie się wyświetlało na jednej stronie, albo część na jednej a cześć na drugiej. Zawsze taka sama część, żeby było łatwiej.
Z tego co rozumiem są dwie kwestie do rozwiązania - jedna taka, że dane muszą być w LocalStorage (ja naprawdę nie ogarniam, co to jest - jestem zielony) druga taka, że ten kod musi się jakoś różnicować. Pytanie jak - szczerze mówiąc i jedno i drugie to dla mnie póki co czarna magia