React - Conditional rendering ( iteration from multiple arrays )

Question

Hi guys currently I have a problem on conditional rendering in react.

I have 2 arrays saved in state :

this.state = {
   arr_one:[1,2,3,4,5],
   arr_two:[1,3,5]
};

I want to render divs iteration with those array and the condition if items in arr_two exists in arr_one, then render the differents divs.

note : I don't want to fix this with modulus condition (%).

Here's my code :

Code :

class TestComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            arr_one:[1,2,3,4,5],
            arr_two:[1,3,5]
        };
    }


    render() {
        const filteredStyle={
            background:'red'
        }
        return (
            <div className="wrapper">
            {
                this.state.arr_one.map((item,index)=>
                    index === this.state.arr_two[index]?
                        <div key={index} className={filteredStyle}>
                            <p>Item {item}</p>
                        </div>
                    : 
                        <div key={index}>
                            <p>I'm not in filter! {item}</p>
                        </div>
                )               
            }

            </div>
        )
    }
}

Output :

I'm not in filter! 1

I'm not in filter! 2

I'm not in filter! 3

I'm not in filter! 4

I'm not in filter! 5

Expected Output :

Item 1

I'm not in filter! 2

Item 3

I'm not in filter! 4

Item 5

I also have my code demo in CodeSandBox

Aprillion · Accepted Answer · 2019-05-19 15:29:01Z

3

You can fix the condition index === this.state.arr_two[index] using includes, to:

this.state.arr_two.includes(item)

answered May 19, 2019 at 15:29

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

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

1 Comment

Billy Over a year ago

Thanks aprill, that's what I want 😇Sorry for asking this simple question cos I'm still learning on iteration 😅

Davis Clack · Accepted Answer · 2019-05-19 15:36:53Z

0

You are comparing index of arr_one with value of arr_two

And I don't understand during your arr_one have value equals 0 but your output isn't

answered May 19, 2019 at 15:36

Davis Clack

363 bronze badges

1 Comment

Billy Over a year ago

Yeah edited. and it's actually arrays saved on state 😅

Collectives™ on Stack Overflow

React - Conditional rendering ( iteration from multiple arrays )

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related