I am writing a React app in which somebody can sign up as a business or user, and a user is able to search for a business by name. I do not understand why I am getting an error when trying to render my search component, saying "TypeError: Cannot read properties of undefined (reading 'toLowerCase')". I do not understand why I am getting this error because I believe I am passing in the appropriate data via my reducers and the Redux store. This is my search component:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BusinessCard from '../Business/BusinessCard'
import { Card } from 'semantic-ui-react';

class Businesses extends Component {
    state = {newSearch: ""}


    handleInputChange = e => {
        this.setState({newSearch: e.target.value})
    }

    render() {
        const { businessesReducer} = this.props;
        
        let businessesMatch = businessesReducer.businesses.filter( (business ) => business.name.toLowerCase().includes(this.state.newSearch.toLowerCase()))
        return (
            <div>
               <input placeholder="Search Events and Services Near You" value={this.state.newSearch} name="businessName" type="text" onChange={this.handleInputChange} />

               <Card.Group itemsPerRow={3}>
               { businessesMatch.map((business, id) => <BusinessCard key={id} business={business} />)}
               </Card.Group>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return ({
      businessesReducer: state.businessesReducer
     })
  }

 export default connect(mapStateToProps)(Businesses);

My businesses reducer:

const initialState = 
{
    businesses:[],
    isLoading: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case 'LOADING':
            return {
                ...state,
                isLoading: true
            }
        case "GET_ALL_BUSINESSES_SUCCESS": 
            return { ...state,
                    businesses: action.businesses,
                    isLoading: false
            }
            
    
    default:
            return state
    }
}

BusinessCard.js (which I am trying to render per the user's search)

import React, { Component } from 'react'; 
import { Card } from 'semantic-ui-react';
import { connect } from 'react-redux';
 
class BusinessCard extends Component {
  constructor(props) {
    super(props);
  }
 
  render(){
    const { business, businessesReducer } = this.props;

    return(
      
       <Card>
            <div key={business.id} >

                <Card.Content>
                    <Card.Header><strong>{business.name}</strong></Card.Header>
              
                </Card.Content>
             </div>
        </Card>
   
    )
  }
}


 
const mapStateToProps = state => {
  return {
    businesses: state.businesses,
    businessesReducer: state.businessesReducer
  }
}

export default connect(mapStateToProps)(BusinessCard);

And App.js

import { getAllBusinesses } from './actions/business/business';

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import history from './history';


class App extends React.Component {

  componentDidMount() {
    this.props.getAllBusinesses();  
}

render() {
  return (
    <Router history={history}>
    <div className="App">
    <NavBar />


    <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About} />
          <Route path="/services" component={Services} /> 
          <Route path="/shop" component={Shop}/>
          <Route path="/login-signup" component={LoginContainer}/>
          <Route path="/signup" component={Signup}/>
          <Route path="/business-signup" component={BusinessSignup}/>
          <Route path="/professional-signup" component={ProfessionalSignup}/>
          <Route path="/search" component={Businesses}/>
    </Switch> 

    </div>
</Router>
  )
}

}

const mapStateToProps = (state) => {
  return {
    businessesReducer: state.businessesReducer
   }
}



export default connect(mapStateToProps, {getAllBusinesses})(App);

Does anybody have any idea why my search component cannot access "business" and its properties? Everything looks correct to me.

CodePudding user response：

1: It would be good if you could show getAllBusinesses.
2: Please make sure if data exists in your store, you can use redux-dev-tools for that.
3: The first time that your component renders there is no data in your store and it's just an empty array so please first check if name exists and has value then try to convert it to lower case.
It would be something like this:

  let businessesMatch = businessesReducer.businesses.filter(
          (business) =>
            business.name &&
            business.name
              .toLowerCase()
              .includes(this.state.newSearch.toLowerCase())
        );

Or if with optional chaining:

let businessesMatch = businessesReducer.businesses.filter((business) =>
  business?.name
    .toLowerCase()
    .includes(this.state.newSearch.toLowerCase())
);

If none of these help please provide more information like a code sandbox.