I'm getting this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.Check the render method of
App.
Here's my App.js code:
import React, { Component } from 'react';import Particles from 'react-particles-js';import Clarifai from 'clarifai';import './App.css';import Navigation from './Components/Navigation/Navigation';import Logo from './Components/Logo/Logo';import Imagelinkform from './Components/Imagelinkform/Imagelinkform';import Rank from './Components/Rank/Rank'import Facerecog from './Components/Facerecog/Facerecog';const app = new Clarifai.App({ apiKey: '391e77688a1e40ceaf6264a70543fcc5' });const particlesOptions={ particles: { number:{ value:30, density:{ enable:true, value_area:800 } } } } class App extends Component { constructor(){ super(); this.state={ input:'', imageUrl:'' } } onInputChange=(event)=>{ console.log(event.target.value); } onButtonSubmit=()=>{ this.setState({imageUrl: this.state.input}); app.models .predict( Clarifai.FACE_DETECT_MODEL, this.state.input) .then( function(response){ console.log(response.outputs[0].data.region[0].region_info.bounding_box) }, function(err){ } ) }render(){ return (<div className="App"><Particles className='particles' params={particlesOptions} /><Navigation/><Logo /><Rank /><Imagelinkform onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/><Facerecog imageUrl={this.state.imageUrl} /></div> );}}export default App;index.js:
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import 'tachyons';ReactDOM.render(<App />, document.getElementById('root'));reportWebVitals();