Rendering random array element from state (React Native)

Asked
Active3 hr before
Viewed126 times

6 Answers

elementstaterenderingreactarray
90%

I'm trying to render a random array item from state so that (e.g - [0] might change to [2] on reload.],I believe you meant to say randomItem instead of randomStatus in handleClick().,here is my handleClick function which will randomise the items grabbed from array

Try changing handleClick() like so:

    handleClick = () => {
       this.setState(prev => ({
          ...prev,
          clicked: true,
          selected: prev.randomItem[Math.floor(Math.random() * prev.randomItem.length) + 0]
       }));
    };
load more v
88%

I am making a small react app with the help of Potter-API through which users can search for specific characters or spells. After fetching data from the API I am rendering 6 random items(characters/spells) which when clicked lead to a detailed view of the item(characters/spells), I’ve also added a button called randomize which when clicked renders a new set of random elements.,PS. I’ve looked at the array that renders these items and every time it contains exactly 6 elements(even when higher number of elements are being rendered),The issue I am facing is with this ‘randomize’ button, on clicking it repeatedly what’s happening is instead of rendering only 6 elements it starts to render 7, 8,… and breaks at some point resulting in an error.

load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

When you use React, at a single point in time you can think of the render() function as creating a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.,When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.,Two elements of different types will produce different trees.

<div>
   <Counter />
</div>

<span>
   <Counter />
</span>
load more v
75%

Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.,Called once when the scroll position gets within onEndReachedThreshold of the rendered content.,Takes an item from data and renders it into the list

(data: any, index: number) => object;
load more v
40%

You now need to pass an array of data to the FlatList via the data prop. That’s available on this.state.data. FlatListDemo.js,Full source code is available on GitHub.,Leaving you with something like this. Notice that at the top and bottom of the list a separator is not rendered.

FlatListDemo.js

import React, { Component } from "react";
import { View, Text, FlatList } from "react-native";

class FlatListDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    this.setState({ loading: true });
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Coming soon...</Text>
      </View>
    );
  }
}

export default FlatListDemo;
load more v

Other "element-state" queries related to "Rendering random array element from state (React Native)"