Должна быть БД (добавление, чтение, удаление, обновление записей). Какую лучше использовать?
const fadeoutModal = () => {
// через useState или еще как-то убираем класс visible
// чтобы произошла анимация
// когда анимация закончится, тогда убираем модал в родительском компоненте
setTimeout( props.setModalHidden, 300 )
}
.....
<div
className={classnames("modal", "visible", "fadeIn")}
onClick={fadeoutModal}
>// MainBlock
handleClick = () => {
this.props.setActive(props.data.id)
}// в class FAQ
setActive = id => { this.setState({ activeId: id }) }
...
{faqList.map( data =>
<MainBlock data={data} active={data.id === this.state.activeId} setActive={this.setActive} />
)}pokemons.pokemonList.map((pokemon, index) => {
.....
const [pokemon, setPokemon] = useState({..
// одинаковое имя переменной pokemon
})class Parent extends React.Component {
state = { c2: null }
comp2state = state => { this.setState({ c2: state }) }
return (
<>
<ComponentOne c2state={this.state.c2} />
<ComponentTwo onStateChange={this.comp2state} />
</>
)
}
class ComponentTwo extends React.Component {
state = { bla: '' }
onChange = e => {
this.setState(
{ bla: e.target.value },
() => this.props.onStateChange(this.state)
)
}
return (
<input value={this.state.bla} onChange={onChange} />
)
}const updatePageNo = 'prev' === type ? this.state.currentPage - 1 : this.state.currentPage + 1;
this.setState( { loading: true }, () => {
this.props.requestSearchMovies(updatePageNo, text)
// когда requestSearchMovies вернет OK, то this.setState( { currentPage: updatePageNo} ),
})onClick = e => {
this.setState(
prevState => ({ isBlock: !prevState.isBlock }), // ставим стейт
// после того как поставили стейт пишем в сторадж
() => { window.localStorage.setItem('isBlock', this.state.isBlock); }
)
}const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux', // await fetch('./db.json') ?
);
setData(result.data);
};
fetchData();
}, []);getMovies = text => async () => { }
// другими словами ты возвращаешь async функцию
function getMovies(text) {
return async function() { }
}// а надо так
getMovies = async text => {
try {
const URL = `https://api.tvmaze.com/search/shows?q=${text}`;
.....renderPosts() {
if (this.state.error) {
return this.renderError();
}
return (
<ul>
{this.state.posts.map(post => (
<li key={post.show.id}>{post.show.name}</li>
))}
</ul>
);
}