React .map built from 1 of 2 arrays

Question

So in short, I'm trying to use an array.map that can be called from one of two arrays depending on an if statement. A bit like so

class App extends Component {
  state = {
    foo: [
      {number:"0"},
      {number:"1"},
      {number:"2"},
      {number:"3"}
    ],
    bar: [
      {number:"9"},
      {number:"8"},
      {number:"7"},
      {number:"6"}
    ],
    fooBar: "foo"
  }

  test = () => {
    if(this.state.fooBar === "foo") {
      return this.state.foo
    } else {
      return this.state.bar
    }
  }

  onChangeFooBar = () = {
    this.setstate({fooBar: bar})
  }

  render(){
    <Button onClick={this.onChangeFooBar}>Set to bar</Button>
    <p>Here are some lines of text</p>
    {this.test.map(list => <p> {list.text} </p>)}
  }
}

However, it throws an error saying it's not a function. What is it I'm no getting here? I'm almost certain my issue is in the.test

As Kind User pointed out, don't forget to add the return statement inside your render method. — Chris
– Chris, Commented Nov 10, 2017 at 13:54

dfsq · Accepted Answer · 2017-11-10 13:38:51Z

5

this.test is a function, not an array. Try to call it first:

{this.test().map(list => <p> {list.text} </p>)}

answered Nov 10, 2017 at 13:38

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Chris Over a year ago

Unless I'm missing something it should be list.number, right?

Alistair Hardy Over a year ago

Bingo. Not sure how I didn't think to do that bit. Thanks

Alistair Hardy Over a year ago

@Chris You're correct there, I literally chucked that together in 5 mins in notepad++ for this post and missed that mistake.

mjrdnk · Accepted Answer · 2017-11-10 13:48:19Z

1

You could as well skip test() function and instead write:

this.state[this.state.fooBar].map(list => <p> {list.number} </p>);

answered Nov 10, 2017 at 13:48

mjrdnk

2333 silver badges11 bronze badges

1 Comment

Chris Over a year ago

Great solution if this.state.fooBar takes the same value as the other state keys (either foo or bar).

kind user · Accepted Answer · 2017-11-10 13:43:25Z

0

Your render function doesn't return anything. Anyways, test function is redundant.

Suggested approach:

render(){
   const { foo, bar, fooBar } = this.state;
   const r = fooBar === 'foo' ? foo : bar;

   return (
      <Button onClick={this.onChangeFooBar}>Set to bar</Button>
      <p>Here are some lines of text</p>
      {r.map(({ number }) => <p>{number}</p>)}
   )
}

answered Nov 10, 2017 at 13:43

kind user

42k8 gold badges69 silver badges78 bronze badges

Collectives™ on Stack Overflow

React .map built from 1 of 2 arrays

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related