React-Native Conditional Rendering with JSON data

Question

I have data that looks like this:

// items.json    
[
      {
        "key": 1,
        "category": "Fruits",
        "colors": [
          {
            "color": "red",
            "favourite": "apple"
          },
          {
            "color": "orange",
            "favourite": "orange"
          }
        ]
      }, 
      {
        "key": 2,
        "category": "Vegetables",
        "colors": [
          {
            "color": "orange",
            "favourite": "carrot"
          },
          {
            "color": "green",
            "favourite": "celery"
          }
        ]
      }
    ]

But it can have an unlimited amount of objects in each array. What I want to do is initially display the categories, which I have done like this:

import Items from './items.json';

// and then I use it in the render method

    render() {
        var items= items;
    return (
         {items.map(item =>
             <TouchableOpacity
                 key={item.key}>
                <Text>
                  {item.category}
                </Text>
             </TouchableOpacity>
          )}
    )
}

Now when a category is pressed I want to hide the categories and display the colors. And then when the color is pressed I want to hide the colors and display the favourite.

I have tried doing this with if else statements, but it that won't work if the data is replaced, and as I mentioned this json object can be quite large. Please help!

Junius L · Accepted Answer · 2019-11-26 19:13:14Z

1

Declare two arrays in your state, one for storing the original data and one for storing the filtered data based on which item was pressed.

state = {
  items: items, // original data
  data: items, // will filter data and display using .map()
  categoryIndex: 0, // index of the selected category
};

Add onPress to your TouchableOpacity and pass the type of the item that was pressed.

{this.state.data.map((item, index) => (
  <TouchableOpacity
    onPress={() =>
      this.onItemPress(
        item.category ? 'category' : item.color ? 'color' : 'favourite',
        index
      )
    }
    key={item.key}>
    <Text>{item.category || item.color || item.favourite}</Text>
  </TouchableOpacity>
))}

onItemPress, based on item that was pressed update state.data

onItemPress = (type, index) => {
  if (type === 'category') {
    this.setState({
      data: this.state.items[index].colors,
      categoryIndex: index,
    });
  }

  if (type === 'color') {
    this.setState({
      data: [
        {
          favourite: this.state.items[this.state.categoryIndex].colors[index]
            .favourite,
        },
      ],
    });
  }

  if (type === 'favourite') {
    this.setState({
      data: this.state.items,
      categoryIndex: 0,
    });
  }
};

DEMO

answered Nov 26, 2019 at 19:13

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

1 Comment

Mandalina Over a year ago

Thank you so much! This is such a nice clean solution. I was wondering if it was possible to expand on this to have different renderings for each type?

Alvin Abia · Accepted Answer · 2019-11-26 18:45:36Z

You need to:

track in your component state what the selected item or color index is so your render function knows when to rerender and what to render.
handle when an item is pressed by adding the onPress prop to your TouchableOpacity and updating the component state as mentioned above

    state = {
        selectedItemIndex: null,
        selectedColorIndex: null,
    };

    render {
        if (this.state.selectedColorIndex) {
           // return some jsx using this data below:
           // items[this.state.selectedItemIndex].colors[this.state.selectedColorIndex].favourite
        }        

        if (this.state.selectedItemIndex) {
            return (
                {items[this.state.selectedItemIndex].colors.map(color, i) => (
                    {/* return jsx here for colors */}
                )}
            );
        }

        return (
            {items.map((item, i) => (
                 <TouchableOpacity
                     key={item.key} 
                     onPress={() => this.setState({ selectedItemIndex: i })}>
                     <Text>
                         {item.category}
                     </Text>
                 </TouchableOpacity>
          ))}
        )
    }

Collectives™ on Stack Overflow

React-Native Conditional Rendering with JSON data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related