Check for certain value in every key of a Javascript object

Question

I have the following line:

<button className={`actionBoxButton ${props.moves[0].moveName !== "FirstPassMove" && props.moves[0].moveName !== "PassMove"  ? "actionBoxButtonGrey" : ''}`}

What it does is to check if the object "moves" has the value "FirstPassMove" for the key moveName. If so, I want it so switch to another style. This is working well. But what I want to achieve is, to not only check the element 0 of the object, but all the objects and check if there is a moveName "FirstPassMove" in any element of the object. It is written in React 16.12

Thanks!

Robin · Accepted Answer · 2020-05-04 19:02:38Z

1

You can simplify your jsx by defining a separate function for dynamic className like this:

const check = () => {
	let className_ = "";
    // if this.props.moves is an array, use of instead of in
	for(let i in this.props.moves) {
		if((this.props.moves[i].moveName !== "FirstPassMove") && (this.props.moves[i].moveName !== "PassMove")) {
			className_ = "actionBoxButtonGrey";
		}
	}

	return className_;
}

<button className={this.check()}>button</button>

edited May 4, 2020 at 19:02

answered May 4, 2020 at 9:17

Robin

5,4672 gold badges34 silver badges49 bronze badges

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

1 Comment

Karim Abou El Naga Over a year ago

cool, thanks for that! the idea of using an external function with a for loop really did solve the problem for me

Jaipi · Accepted Answer · 2020-05-04 09:20:25Z

0

props.moves.includes('FirstPassMove')

Assuming your props.moves is an array it will return true or false if this string is inside the props.moves array

answered May 4, 2020 at 9:20

Jaipi

505 bronze badges

Comments

Nazar Litvin · Accepted Answer · 2020-05-04 09:20:48Z

0

If you want to add className in case at least one of your moves has FirstPassMove or PassMove name you should use Array.prototype.some()

const hasPass = moves.some(({ moveName }) => (
  moveName === "FirstPassMove" || 
  moveName === "PassMove"
));

edited May 4, 2020 at 9:20

answered May 4, 2020 at 9:13

Nazar Litvin

7786 silver badges10 bronze badges

Comments

Callam · Accepted Answer · 2020-05-04 09:23:19Z

I am guessing you want to check that all the moves satisfy the constraint, in which case, you can use Array.prototype.every to ensure every move satisfies the constraint. If you only need some moves to satisfy the constraint, you may use Array.prototype.some instead.

// For example
const props = {
    moves: [
        { moveName: 'FirstPassMove' },
        { moveName: 'PassMove' },
        { moveName: 'PassMove' },
        { moveName: 'OtherPassMove' },
    ]
};

function isValidMove({ moveName }) {
    return moveName !== "FirstPassMove"
        && moveName !== "PassMove";
}


function getActionBoxButtonClassName(hasColor) {
    return `actionBoxButton ${hasColor ? "actionBoxButtonGrey" : ''}`;
}

console.log([
    getActionBoxButtonClassName(props.moves.every(isValidMove)),
    getActionBoxButtonClassName(props.moves.some(isValidMove))
]);

Collectives™ on Stack Overflow

Check for certain value in every key of a Javascript object

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related