How import and export components (functions) in ReactJS?
18:07 10 Apr 2018

I'm trying to export and import components in my project, but i don't getting.

My code of the my main App:

import React, { Component } from 'react';
import './App.css';
import Search from './Search';

export default class App extends Component {
  constructor() {
    super();

    const peoples =[{id:0, name:"Jean"}, 
    {id:1, name:"Jaquinha"}, 
    {id:2, name:"Ricardo"}, 
    {id:3, name:"JaCA"}, 
    {id:4, name:"Letiiicia"}, 
    {id:5, name:"Dai"}, 
    {id:6, name:"Da iIIane"}, 
    {id:7, name:"Tamy"}, 
    {id:8, name:"Tamyresss"},
    {id:9, name:"Tamyres"}, 
    {id:10, name:"Abeu"}, 
    {id:11, name:"Abellll"}];
    
    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
    };
    
  } 
  
  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
    this.filterNames(inputValue);
  }
  
  filterNames = (inputValue) => {
    const { peoples } = this.state;
    this.setState({
      filtered: peoples.filter(item => 
        item.name.includes(inputValue)),
        currentPage:0
      });
}

And i want to import functions for other file, called Search, functions: getValueInputand filterNames and after to import for my render():

render() {
 return (
  

   
  

 )

The page, Search.js:

import React, { Component } from 'react';
import {App} from './App'

export class Search extends React.Component{
    constructor(){
        super()
        
    }
    
    getValueInput = (evt) => {
        const inputValue = evt.target.value;
        this.setState({ input: inputValue });
        this.filterNames(inputValue);
    }
    
    filterNames = (inputValue) => {
        const { peoples } = this.state;
        this.setState({
            filtered: peoples.filter(item => 
                item.name.includes(inputValue)),
                currentPage:0
            });
        }
        
        render (){
            return(
                
                

                
                
    Names: {this.elementsOnScreen()}

                
                

            )
            
        }
    }
    
    export default Search;

But giving error in page Search.js and not works:

Line 1: 'Component' is defined but never used no-unused-vars Line 2: 'App' is defined but never used no-unused-vars

I want to have the same functionality but with separates files.

Someone would can help-me?

reactjs