其他组件中的道具未定义 React

Question

I'm newbie in React and trying to build a sample search filter with data from API. Unfortunately I have problem with this code.

It's get me an error,,Cannot read property 'filter' of undefined".

It seems to me like child component doesn't get props from parent but I declared and imported this in code. I've tried everything what I found on the internet but nothing helps. Can someone help me out with understanding what I made wrong?

Child

     import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Data from './Data';

class App extends Component {
  constructor() {
    super();
    this.state = {
      search : " "
    };
  }


updatedSearch(event) {
  this.setState(
    {search : event.target.value.substr(0,15)}
    )
}

  render () {

    console.log(this.props.names)
    let filterednames = this.props.names.filter(
      (name) => {
        return name.toLowerCase().indexOf(this.state.
          search.toLowerCase()) !== -1;
      }
    );
    return (  
        <div className = "App">
        <h1> Users list </h1>
        <Data />
        <input  type = "text" 
          placeholder = "Search by user name" 
          value = {this.state.search}
          onChange = {this.updatedSearch.bind(this)}
        />
        <ol>
            {filterednames.map(name => (
            <li key={name}>{name}</li>
            ))}
        </ol>
        </div>
    )
    
    }



}

ReactDOM.render(<App/>,document.getElementById('root'));



export default App;

Parent

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



class Data extends Component {
    constructor(props) {
      super(props);
      this.state = {
        names : [],
      }
    }

  
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          //Response
        .then(response => response.json())
        .then(output => {
           let data = output;
      
        //names in array
        let listaimion = [];

        for (let index = 0; index < data.length; index++) {
          listaimion.push(data[index].name)
         }
      
      this.setState({names : listaimion})
      })
    }

     
     render () {  
       return (
         <div className = "Data">
            <App  names = {this.state.names} /> 
         </div>
       )
     }
}
    
export default Data;

Answer 1

In the parent component, App needs to be declared. Also, App looks like your entry point of your application. Seems like, you might have mixed up Child and Parent here.

Parent -

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import Data from './Data';
    
   class App extends Component() {
   constructor() {
      this.state = {
        names : [],
      }
   }

  
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          //Response
        .then(response => response.json())
        .then(output => {
        let data = output;
        let listaimion = [];
        for (let index = 0; index < data.length; index++) {
          listaimion.push(data[index].name)
        }      
        this.setState({names : listaimion});
      });
    }

     
     render () {
       return (
         <div className = "Data">
          <Data  names = {this.state.names} /> 
         </div>       
       )
     }
    }

ReactDOM.render(<App/>,document.getElementById('root'));
export default App;

Child

import React, { Component } from 'react';

class Data extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      let filterednames = this.props.names.filter((name) => {
         return name.toLowerCase().indexOf(this.state.
           search.toLowerCase()) !== -1;
         }
      );
      return (<div>{filterednames.join(',')}</div>)
   }
}

Answer 2

The <App> component should be the parent - that is where your state should live. You would then pass this.state.names from <App> to <Data> inside the App render method. You should not import App inside Data - App should render Data .

// App.js
class App extends Component {
  state = {
    names: []
  }
  componentDidMount(){
    // fetch data and when it's done use this.setState({ names: data })
  }
  render() {
    return <Data names={this.state.names}/>
  }
}

// Data.js
const Data = (props) => {
  return props.names.map(() => {...your map function})
}