I am having an error on React, I have a class component called movie and I am getting module not found, so React in webpack can't compile, despite having the component on the right path.
Here is the component
import React, {Component} from 'react';
class Movie extends Component{
render(){
return(
<div onClick={this.props.deleteMethod}>
{this.props.text}
</div>
);
}
}
export default Movie;
Here is the import (where component is expected but not found): (in : ./src/components/AddComponent.jsx)
import React,{Component} from 'react';
import Movie from './component/Movie.jsx';
class AddComponent extends Component {
constructor(props){
super(props);
this.state = {
movieText: '',
movies: [],
};
}
updateMovieText(movieText){
this.setState({movieText: movieText.target.value})
}
addMovie(){
if(this.state.movieText === ''){return}
let moviesArr = this.state.movies;
moviesArr.push(this.state.movieText);
this.setState({movieText: ''})
this.textInput.focus();
}
handleKeyPress = (event) => {
if(event.key === 'Enter'){
}
}
deleteMovie(index) {
let movieArr = this.state.movies;
movieArr.splice(index,1);//remove the movie from array
this.setState({movies: movieArr})
}
render(){
let movie = this.state.movie.map((val,key)=> {
return <Movie key={key} text={val} deleteMethod={() => this.deleteMovie(key)} />
});
return (
<div>
<input type="text"
ref={((input)=>{this.textInput = input;})}
value={this.state.movieText}
onChangeText={movieText => this.updateMovieText(movieText)}
onKeyPress={this.handleKeyPress.bind(this)}
/>
<button onClick={this.addMovie.bind(this)}>Add</button>
</div>
);
}
}
export default AddComponent;
Aucun commentaire:
Enregistrer un commentaire