ReactJS - Iterating each item (from state) in array using map. Item's property is undefined

Question

After Python/Django I am trying my hands on ReactJS. I was able to follow a tutorial and at least understand how ReactJS works. So I thought of implementing a simple scenario wherein all items form a state are shown. Upon user entry in input, the items are filtered. That's pretty much I am trying to do. Here is my App.js file.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ByLocation from './components/Bylocation';

class App extends Component {
  state = {
      updates : [
          {
            id:1,
            area: 'yavatmal',
            phase: 'input',
            program: 'clap',
            activity: 'distribution',
            timestamp: '26-06-2020 14:30'

          },

          {
            id:2,
            area: 'pune',
            phase: 'input',
            program: 'clap',
            activity: 'utilization',
            timestamp: '26-06-2020 12:00'
          },

      ],
      filteredupdates : [
          {
            id:1,
            area: 'yavatmal',
            phase: 'input',
            program: 'clap',
            activity: 'distribution',
            timestamp: '26-06-2020 14:30'

          },

          {
            id:2,
            area: 'pune',
            phase: 'input',
            program: 'clap',
            activity: 'utilization',
            timestamp: '26-06-2020 12:00'
          },

      ]
  }


  onChange = (e) => {
    this.setState({filteredupdates:this.state.updates})
    let myUpdates = this.state.updates.filter(update => update.area.includes(e.target.value));
    this.setState({filteredupdates:myUpdates})
  }


  render() {
      return (
        <div className="App">
          <h3>Search By Location: </h3>
          <ByLocation updates={this.state.updates} handleChange={this.handleChange}/>
        </div>
      );
  }
}

export default App;

Here is the Bylocation component.

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


class ByLocation extends Component {

    render() {
        return (
            <div>
            <InputBox onChange={this.props.handleChange} />
                this.props.updates.map((update) => (
                    <p>{update.area}</p>
                )
            </div>
        )


    }

}

export default ByLocation;

And finally my last component,inputbox.

import React, { Component } from 'react';

class InputBox extends Component {

    render() {

        return (
            <div>
            <input type="text" placeholder="Enter location" />
            </div>
        )


    }

}

export default InputBox;

I know I have to update handlechange function. But the current code refuses to run

Failed to compile ./src/components/Bylocation.js Line 12:25: 'update' is not defined no-undef

Search for the keywords to learn more about each error.

Why is update undefined that too in the next line? That is, my map function's line where I introduce update is ok but ReactJS is complaining about update in the next line.

Can someone help me here?

Marik Ishtar · Accepted Answer · 2020-06-28 06:11:08Z

3

This code this.props.updates.map((update) => ( is treated as text, but when you add {update.area} the curly braces, react tries to calculate the value of update.area but it it didn't find the update object

You need to wrap this.props.updates.map in a {}

Try this

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


class ByLocation extends Component {

    render() {
        return (
            <div>
                <InputBox onChange={this.props.handleChange} />
                { this.props.updates.map((update) => (<p>{update.area}</p>)) }
            </div>
        )
    }

}

export default ByLocation;

edited Jun 28, 2020 at 6:11

answered Jun 28, 2020 at 5:54

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ajay Shah Over a year ago

I tried following your code. It was missing the closing bracket for return, I included that as well. The new error is on the new line { this.props.updates.map((update) => (<p>{update.area}</p>) }. Parsing error: Unexpected token, expected ","

Marik Ishtar Over a year ago

try to remove the last , from the updates array in the state of App component the one after the closing } in the second object

Ajay Shah Over a year ago

Tried that. Still refuses to go. Weird. There is no use case of a , here.

Marik Ishtar Over a year ago

did u removed the , from the filteredupdates also ?

Ajay Shah Over a year ago

Ok figured it That {} should close out map parenthesis right before }. Thank you for your help!

Collectives™ on Stack Overflow

ReactJS - Iterating each item (from state) in array using map. Item's property is undefined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related