Это что-то вроде пагинации.
const currPathIndex = paths.findIndex(n => n.link === location.pathname);
const isPrev = currPathIndex !== 0;
const isNext = currPathIndex !== paths.length - 1;
const onClick = e =>
history.push(paths[currPathIndex + +e.target.dataset.step].link);
<button disabled={!isPrev} data-step={-1} onClick={onClick}>PREV</button>
<button disabled={!isNext} data-step={+1} onClick={onClick}>NEXT</button>
{isPrev && <NavLink to={paths[currPathIndex - 1].link}>PREV</NavLink>}
{isNext && <NavLink to={paths[currPathIndex + 1].link}>NEXT</NavLink>}
почему он может не перерисовывается когда данные поступают?
.length
где-то здесь:Object.keys(this.props.landingState) > 0
onMouseDown(e) {
e.preventDefault();
}
onMouseDown={this.onMouseDown}
onClick={ this.setState({isOpen: !this.state.isOpen}) }
Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно.
You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.
isBlockNavButtons
отвечает за логику disable для тех кнопок. То есть если у нас элемент последний или первый, то мы блочим нужную нам кнопку.
dispatch({
type: `${CREATE_QUESTION}_BLOCK_BUTTON`,
payload: {
blockPreviousButton: elementIndex === 0,
blockNextButton: elementIndex === data.length - 1,
},
});
shouldComponentUpdate(nextProps, nextState) {
return !this.state.updatesLocked || !nextState.updatesLocked;
}
Может кто-нибудь подсказать почему так происходит и как исправить?
class AddItems extends React.Component {
state = {
value: '',
items: [],
}
inputChange = ({ target: { value } }) => {
this.setState({ value });
}
addNewItem = () => {
if (this.state.value) {
this.setState({
items: [ ...this.state.items, {
text: this.state.value,
id: (new Date()).getTime().toString(),
} ],
value: '',
});
}
}
render() {
return (
<div className="addItems">
<div className="addSection">
<input type="text" value={this.state.value} onChange={this.inputChange} />
<input type="submit" onClick={this.addNewItem} />
</div>
<div className="listSection">
<ul>{this.state.items.map((item) => <li key={item.id}>{item.text}</li>)}</ul>
</div>
</div>
)
}
}
тег должен меняться,а не добавляться, как по дефолту сейчас
Нормальное ли разделение компонентов
правильно ли делать такие передачи props??
Обновить не вариант, в проекте этот юзается(
Слишком много надо будет переписывать
class App extends React.Component {
state = {
value: '',
}
onChange = ({ target: { value } }) => {
this.setState({ value });
}
render() {
const name = this.state.value.split(/\s+/);
return (
<div>
<input onChange={this.onChange} />
<p>Ф: {name[0]}</p>
<p>И: {name[1]}</p>
<p>О: {name[2]}</p>
{name[3] && <p>WTF??! {name.slice(3)}</p>}
</div>
);
}
}