this.state = {
verticalLines: vLines,
horizontalLines: hLines,
};
this.setState( {
verticalLines: vLines,
horizontalLines: hLines,
} );
Должна быть БД (добавление, чтение, удаление, обновление записей). Какую лучше использовать?
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();
}, []);