Answer the question
In order to leave comments, you need to log in
Why does the component not see the props passed to it?
Hello. The situation is the following.
App is passing props list to Input.
When I enter a number, an error occurs on click and writes TypeError: list is undefined App.js:34.
Why is this happening and why is the passed value not visible? I can't understand how. help me please
class App extends Component {
constructor() {
super();
this.state = {
passivList: [
{
id: 1,
text: 10
},
{
id: 2,
text: 20
}
],
activList: [
{
id: 1,
text: 30
},
{
id: 2,
text: 40
}
]
};
this.inputClickActiv = this.inputClickActiv.bind(this);
this.inputClickPasiv = this.inputClickPasiv.bind(this);
}
inputClickActiv = ({ list, value }) => {
this.setState(
list.push({
id: Date.now(),
text: value
})
);
};
inputClickPasiv = ({ list, value }) => {
this.setState(
list.push({
id: Date.now(),
text: value
})
);
};
render() {
const { activList } = this.state;
const { passivList } = this.state;
return (
<div>
<h1>Money</h1>
<article>
<Input list={activList} on={this.inputClickActiv} />
<Input list={passivList} on={this.inputClickPasiv} />
</article>
</div>
);
}
}
class Input extends Component {
constructor(props) {
super(props);
this.inputClick = this.inputClick.bind(this);
}
inputValue = createRef();
async inputClick() {
if (+this.inputValue.current.value) {
// ошибка в этой строке
await this.props.on(this.props.list, this.inputValue.current.value);
} else console.error("только число!");
await (this.inputValue.current.value = " ");
}
render() {
const { list } = this.props;
return (
<section className="activ-column">
<input ref={this.inputValue} type="text" value={this.value} />
<button onClick={this.inputClick}>input</button>
<ul>
<List list={list} />
</ul>
</section>
);
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question