Develop Reference

React-Native Flatlist all Flatlist Rerender on one Item Selection

I'm building a React-Native app and trying to optimize it, i runned into the case of my Flatlist.
So this Flatlist basically renders few elements and each of these elements are selectable.
The issue i'm facing is that selecting one single item rerenders the whole Flatlist, and thus all items it contains.
I've seen a lot of solutions online already, and tried them without any success.
Here is my code :
Class component containing the Flatlist
const keyExtractor = (item) => item.id
export default class OrderedList extends Component {
state = {
selected: null,
}
onPressSelect = (id) => {
console.log(this.state.selected)
if(this.state.selected === id) {
this.setState({ selected: null})
}
else {
this.setState({ selected: id})
}
}
renderItemOrdered = ({item}) => {
const { group, wording, description, id: uniqueID } = item
const { id, name } = group
return (
<CategoryCard
type="ordered"
// item={item}
uniqueID={uniqueID}
groupName={name}
groupID={id}
description={description}
title={wording}
selected={this.state.selected}
onPressSelect={() => this.onPressSelect(item.id)}
/>
)
}
render() {
return (
<FlatList
initialNumToRender={10}
maxToRenderPerBatch={10}
data={this.props.data}
renderItem={this.renderItemOrdered}
keyExtractor={keyExtractor}
extraData={this.state.selected} ---> Tried with and without it
/>
)
}
}
Class component containing the renderItem method
export default class CategoryCard extends Component {
shouldComponentUpdate = (nextProps, nextState) => {
return nextProps.selected !== this.props.selected &&
nextProps.onPressSelect !== this.props.onPressSelect
}
render(){
if(this.props.type === 'ordered') {
return (
<Pressable style={this.props.selected === this.props.uniqueID ? styles.cardContainerSelected : styles.cardContainer} onPressIn={this.props.onPressSelect}>
<View style={[styles.cardHeader, backgroundTitleColor(this.props.groupID)]}>
<Text style={[styles.cardGroupName, textTitleColor(this.props.groupID)]}>{this.props.groupName}</Text>
</View>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{this.props.wording}</Text>
<Text style={styles.cardDescription} numberOfLines={3} ellipsizeMode="tail">{this.props.description}</Text>
</View>
</Pressable>
)
}
}
}
What i already tried :
At first my components were functional components so i changed them into class components in order to make things works. Before that, i tried to use React.memo, also to manually add a function areEqual to it, to tell it when it should rerender, depending on props.
It didn't give me what i wanted.
I also tried to put all anonymous functions outside return statements, made use of useCallback, played around the ShouldComponentUpdate (like adding and removing all the props, the onPress prop, selected props)... None of that worked.
I must be missing something somewhere.. If you can help me with it, it would be a big help !

having difficulty in extracting out id in react component

I can see item and item id as it loops to render on the screen but i don't see the value of id when i click on any of the Tile where Tile is a div and react styled component.
class CategoryOffers extends React.Component {
passidtopointscreen =(id)=>{
console.log("id is", id);
localStorage.setItem('points_id',id);
this.props.history.push('/marketplacepoints')
debugger
}
render() {
debugger
return (
<Wrapper>
{this.props &&
this.props.cards_data &&
this.props.cards_data.map(item => {
return (
<Tile onClick={(item)=>this.passidtopointscreen(item.id)}>
<ImageWrapper>
<Image src={item.logo} height={'24px'} width={'73px'} />
</ImageWrapper>
<CardString>{item.offer_summary}</CardString>
</Tile>
)
})}
</Wrapper>
)
}
}

onClick={()=>this.passidtopointscreen(item.id)}
while adding item there you create new instance for this keyword for no reason

By having the same argument-name as your already decleared argument (item), you overwrite the outer argument. There should be no reason for you here to use the event-argument, if I have understood your question correctly.
I would also suggest avoiding localstorage and instead make use of the state.
I made the component into functional one here:
import React from "react";
const CategoryOffers = ({history,cards_data}) => {
const passidtopointscreen =(id)=>{
localStorage.setItem('points_id',id);
history.push('/marketplacepoints')
}
return (
<Wrapper>
{
cards_data?.map(item => {
return (
<Tile onClick={(event)=>passidtopointscreen(item.id)}>
<ImageWrapper>
<Image src={item.logo} height={'24px'} width={'73px'} />
</ImageWrapper>
<CardString>{item.offer_summary}</CardString>
</Tile>
)
})}
</Wrapper>
)
}
}

if else condition not evaluating in react component

So I'm making a todo list app and to provide alternate colors to new todo items as they are added in the todolist i have used the if else statement in React component but i think it is not evaluating.
Below are the two classes from my css file that i'm using -->
.bgColorItem1{
background-color: white;
}
.bgColorItem2{
background-color:grey;
}
Below is the component that accepts arguments item(todo item that will be added to the list) and key(index passed as key) from todolist -->
import React from 'react';
import './App.css';
const TodoItem=({item,key})=>{
let settingClass="";
// *****so the problem is here in the if condn that's not putting settingClass as bgColorItem1*****
if(key%2===0){
settingClass="bgColorItem1";
}else{
settingClass="bgColorItem2";
}
return <div className={`boxSpace centerAligning ${settingClass}`}>{item}</div>
}
export default TodoItem;
So what i expect from this code that key which was index in todolist component passed to todo here above should return 0 for even so that settingClass can have alternate values and hence provide alternate colors.But that is not the case.

First of all, don't use key's value since it is internal. Secondly, you can achieve like this
{items.map((item, index) => <TodoItem item={item} index={index} />)}
In TodoItem
const TodoItem=({ item, index })=>{
let settingClass=index % 2 === 0 ? 'bgColorItem1' : 'bgColorItem2';
return <div className={`boxSpace centerAligning ${settingClass}`}>{item}</div>
}
However, you don't need react to do this, just use css, in your css
.boxSpace:nth-child(odd) {
background: red;
}
.boxSpace:nth-child(even) {
background: blue;
}

You can't use key property as it is reserved, also you will get a warning for it:
Warning: ListItem: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Simple example:
const ListItem = ({ key }) => {
console.log(key);
return <div>{key}</div>;
};
const App = () => {
return (
<>
{[0, 1, 2, 4].map(item => (
<ListItem key={item} />
))}
</>
);
};

Your TodoItem component shouldn't have to care about the key prop, but rather a boolean (or a string if you have more than 2 styles) prop like alternateStyle:
const TodoItem=({item,alternateStyle})=>{
return <div className={
`boxSpace centerAligning ${alternateStyle ? 'bgColorItem2' :
'bgColorItem1'}`
}>
{item}
</div>
Then you can set the value you need to alternateStyle in the parent component:
<div>
{items.map((item, index) => <TodoItem item={item} alternateStyle={index % 2 !== 0} />)}
</div>

key "prop" is reserved in React. You cannot use it. Rename this props to "idx"
See: Special props

Component not passing props to other component in same file when calling as const

I am trying to pass props from one component to another. The index property in SortableSectionList does not seemed to be passed to SortableSection though. See console output below.
Index in SortableSectionList: 0
Index in SortableSectionList: 1
(2) Index in SortableSection: undefined
Other properties like menuSection get passed just fine though. See the full code below. Any help is appreciated, thanks!
import React from 'react'
import MenuSection from './MenuSection'
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
class MenuSections extends React.Component {
render() {
const menuSections = this.props.menuSections
const SortableSectionList = SortableContainer(({ menuSections, onSectionSortEnd }) => (
<div>
{menuSections.map(function(menuSection, index) {
console.log('Index in SortableSectionList: ' + index)
return (
<SortableSection
collection="section"
key={`item-${menuSection.id}`}
menuSection={menuSection}
index={index}
menuItems={menuSection.menuItems}
onSortEnd={onSectionSortEnd}
/>
)
})}
</div>
))
const SortableSection = SortableElement(({ menuSection, index, menuItems, onSortEnd }) => {
console.log('Index in SortableSection: '+index)
return (
<MenuSection
key={menuSection.id}
menuSection={menuSection}
index={index}
menuItems={menuItems}
onSortEnd={onSortEnd}
/>
)
})
return (
<div>
<SortableSectionList
menuSections={this.props.menuSections}
lockAxis="y"
lockToContainerEdges
onSortEnd={this.props.onSortEnd}
onSectionSortEnd={this.props.onSectionSortEnd}
/>
</div>
)
}
}
export default MenuSections

It seems that react-sortable-hoc uses index property by itself. So if you want to use it also you better add another property like sortIndex or similar and pass it.
return (
<SortableSection
index={index}
sortIndex={index}
...
They also have an explanation and example in their docs.

Specifying complex PropTypes for children

I'm writing a small Toolbar component in React. Here's how it should be used:
<Toolbar>
<ToolbarButtonSearch />
<ToolbarButtonFold />
</Toolbar>
or
<Toolbar>
<ToolbarButtonSearch />
</Toolbar>
or
<Toolbar>
<ToolbarButtonFold />
</Toolbar>
I'd like to be able to specify that the only children Toolbar accepts are one of ToolbarButtonSearch, one of ToolbarButtonFold, or one of each.
Here's what I have now (not including imports):
export default class Toolbar extends React.Component {
static get propTypes() {
const acceptedChildren =
React.PropTypes.oneOfType([
React.PropTypes.instanceOf(ToolbarButtonFold),
React.PropTypes.instanceOf(ToolbarButtonSearch)
]);
return {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(acceptedChildren),
acceptedChildren
]).isRequired
};
}
render() {
return (
<div className="toolbar">
{this.props.children}
</div>
);
}
}
Here's how I'm using it:
<Toolbar>
<ToolbarButtonFold />
</Toolbar>
This results in the following error:
Warning: Failed prop type: Invalid prop 'children' supplied to 'Toolbar'.
I'm not sure what I'm doing wrong. Any insight would be very helpful. Thanks!

Did you tried to do:
customProp: function (props, propName, componentName) {
props.children.forEach(child => {
if (!child instanceof ToolbarButtonSearch && !child instanceof ToolbarButtonFold) {
return new Error(
'Invalid children supplied to' +
' `' + componentName + '`. Validation failed.'
)
}
})
}

Instead of passing components (since they have to be imported into Toolbar, anyway), you could just pass props defining if the specific component should be displayed.
const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {
return (
<div className='Toolbar'>
{showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}
{showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}
</div>
)
}
This method would also allow you to pass props for the children as well as any further functionality you need before displaying the children (such as ordering the children a specific way).