Failed to compile ./src/App.js Line 30:3: 'onInputChange' is not defined no-undef - node.js

Question

Failed to compile
./src/App.js
Line 30:3: 'onInputChange' is not defined no-undef
Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.
The code of App.js
import React from 'react';
import Logo from './components/Logo/Logo';
import './App.css';
import Navigation from './components/Navigation/Navigation';
import ImageLinkForm from './components/imagelink/ImageLinkForm';
import Rank from './components/Rank/rank'
import Particles from 'react-particles-js';
const particlesOptions= {
particles: {
number:{
value:30,
density:{
enable:true,
value_area:800
}
}
}
}
function App() {
constructor()
{
super();
this.state = {
input: '',
}
}
onInputChange = (event) => {
console.log(event.target.value);
}
return (
<div className="App">
<Particles className="particles"
params={particlesOptions} />
<Navigation/>
<Logo/>
<Rank/>
<ImageLinkForm onInputChange={this.onInputChange}/>
{/*<FaceRecognition/>*/}
</div>
);
}
export default App;
The code of ImageLinkForm.js
import React from 'react';
import './ImageLinkForm.css';
const ImageLinkForm = ({ onInputChange }) => {
return (
<div>
<p className='f3'>
{'This Magic Brain will detect faces in your pictures'}
</p>
<div className='center'>
<div className='form center pa4 br3 shadow-5'>
<input className='f4 pa2 w-70 center' type='tex' onChange={onInputChange}/>
<button className='w-30 grow f4 link pv2 dib white bg-light-purple'>Detect</button>
</div>
</div>
</div>
);
}
export default ImageLinkForm;
I want to know how to fix this error.

Answer 1

I solved it.
By writing a class on it.
App.js
import React, { Component } from 'react';
import Logo from './components/Logo/Logo';
import './App.css';
import Navigation from './components/Navigation/Navigation';
import ImageLinkForm from './components/imagelink/ImageLinkForm';
import Rank from './components/Rank/rank'
import Particles from 'react-particles-js';
const particlesOptions= {
particles: {
number:{
value:30,
density:{
enable:true,
value_area:800
}
}
}
}
class App extends Component
{
constructor()
{
super();
this.state = {
input: '',
}
}
onInputChange = (event) => {
console.log(event.target.value);
}
render(){
return (
<div className="App">
<Particles className="particles"
params={particlesOptions} />
<Navigation/>
<Logo/>
<Rank/>
<ImageLinkForm onInputChange={this.onInputChange}/>
{/*<FaceRecognition/>*/}
</div>
);
}
}
export default App;