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();