useEffect(() => props.checkUserToken() , [props.checkUserToken]);
class App extends Component {
state = {
input: '',
};
handleChange = (event) => {
event.persist();
this.setState({ input: event.target.value });
}
render() {
const { input } = this.state;
return(
<div>
<br /><br /><br /><br /><br /><br />
<input type=''
name='input'
value={input}
onChange={this.handleChange}
placeholder='основной компонент'
/>
<br />
<Switch>
<Route
exact
path="/"
render={props => (
<PageIndex {...props} input={input} onChange={this.handleChange} />
)}
/>
</Switch>
</div>
);
}
}
const PageIndex = ({ input, onChange }) => {
return (
<div>
<hr /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input
name='input'
value={input}
onChange={onChange}
placeholder='дочерний компонент'
/>
</div>
)
}
...
state = {
json: [],
}
...
componentDidMount() {
fetch('https://site.com/data.json')
.then(response => response.json())
.then(json => this.setState({ json }));
}
...
render() {
const { json } = this.state;
return (
{json.map(({ id, link })) => (
<div>
<span>{id}</span>
<span>{link}</span>
</div>
)}
)
}
...
{
actor: [ ... ],
actress: [ ... ],
}
{[...data.actor, ...data.actress].map(item => (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.film}</td>
</tr>
))}
render(){
const { actor, actress } = this.state.data
return(
<div>
<Content data={[...actor, ...actress]} />
</div>
);
}
class App extends React.Component {
onTextClick = index => (e) => {
...
}
onHintClick = index => (e) => {
...
}
onExtaClick = index => (e) => {
...
}
render() {
const items = [{}, {}];
return (
<ItemsList
items={items}
onTextClick={this.onTextClick}
onHintClick={this.onHintClick}
onExtaClick={this.onExtaClick}
/>
)
}
}
export default class Item extends React.Component {
render() {
const { item, index, onTextClick, onHintClick, onExtaClick } = this.props;
return (
<div className="item">
<div className="item-over">...</div>
<div className="item-main">
<div className="item-text" onClick={onTextClick(index)} />
<div className="item-hint" onClick={onHintClick(index)} />
<div className="item-extra" onClick={onExtraClick(index)} />
</div>
</div>
);
}
}