Develop Reference

How to efficiently toggle classes with multiple HTML elements across multiple files

I am toggling an arrow image whenever my div is clicked. I am controlling the state of the click with
const [toggleArrow, setToggleArrow] = useState(false)
My div has an onClick function that controls the state and toggles the faq-subject-toggle-arrow class that adds an image
<div className={`faq-subject ${toggleArrow ? 'faq-subject-toggle-arrow' : ''}`} onClick={() => {
setToggleArrow(!toggleArrow)
}>
My problem is that I have 50 divs across multiple styles and don't want to make 50 states to toggle one image.
Is there a more efficient solution for this with less code?

I created something that does the same thing. I extracted your code and made a component. now the state lives inside the component and will not affect others.
live demo
component
import { useState } from "react";
export const Button = () => {
const [toggleArrow, setToggleArrow] = useState(false);
return (
<div
style={{ width: "50px", height: "50px", margin: "10px" }}
className={`faq-subject ${toggleArrow ? "faq-subject-toggle-arrow" : ""}`}
onClick={() => {
setToggleArrow(!toggleArrow);
}}
></div>
);
};
css file, I didn't have the same classes so I created mine.
.faq-subject {
background: blue;
}
.faq-subject-toggle-arrow {
background: orange;
}
now you can use it wherever you want for multiple times
import { Button } from "./button";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Button />
<Button />
<Button />
<Button />
<Button />
</div>
);
}

Show button and text in react native

I tried to code in react native today and tried to write a program with a button and a text that changes with every press:
import { Text, View, StyleSheet, TouchableOpacity, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';
export default () => {
const onButton = () =>
{
myResult(10);
}
return (
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
)
}
It gives me this error:
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
If I comment the text class or the button class like that:
//<Text>Hello World</Text>
the other class would work.
Any suggestions?

You can't render multiple component like that. Like the error message said, you have to wrap them in an enclosing tag.
<View>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</View>

You are returning 2 components, in react you must return just one component, so your code you could wrapping in two ways:
<View>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</View>
Or using Fragment component of react that will no add a node in your component tree
//You can use Fragment as <></> or <React.Fragment></React.Fragment>
<>
<Text>Hello World</Text>
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
</>

The best option is to wrap it in a <View> tag, as mentioned in the other two answers.
Here is a fun solution, you can even return an array.
Example:
return [
<Text>Hello World</Text>,
<Button
onPress={onButton}
title="Click Here to calculate"
color="black"
/>
];

React error: Invalid hook call. Hooks can only be called inside of the body of a function component

I have checked for 2 hooks violations, I have the same version of react and react-dom, and have no duplicate copy of react. I am unable to understand what the error is actually?
index.js:3221 Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I have a set of filters that i want to show to user :
import Chip from "#material-ui/core/Chip";
import React, { Fragment } from "react";
import Text from "#material-ui/core/text";
function RenderFilter(props) {
return (
<Fragment>
<RenderHeader />
<RenderX {...props} />
<RenderSomething {...props} />
</Fragment>
);
function RenderSomething(props) {
const { filters } = props;
const allowedKeys = Object.keys(filters);
return (
<div>
{allowedKeys.map((item, index) => (
<Fragment key={index}>
<div
style={{
display: "flex",
justifyContent: "space-between",
margin: "8px 0px"
}}
>
<div style={{ borderBottom: "1px #f6f6f6" }}>
<div style={{ maxWidth: 200 }}>
<Text>{item}</Text>
</div>
<div>
{filters[item].map(ele => (
<Chip key={`${ele}`} color="primary" label={`${ele}`} />
))}
</div>
</div>
</div>
</Fragment>
))}
</div>
);
}

React Semantic Ui Button hover

I have recently started doing React programming and I am currently working on sidebar navigation. I am using React Semantic UI for my website and I have buttons for my navigation. However there is a problem I can't find a solution for, I am trying to disable the hover effect on buttons and I've tried multiple things (assigning a class to Button Group/ div and try to access it from CSS for example) but without luck. Here's my code any suggestions will be appreciated
import React, { Component } from "react";
import { Button, Icon } from "semantic-ui-react";
import "../styles/DotNav.css";
export default class DotNav extends Component {
state = { activeItem: "home" };
handleContextRef = contextRef => this.setState({ contextRef });
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() {
return (
<div style={{ position: "fixed", marginLeft: 1370, marginTop: 100 }}>
<Button.Group vertical className="ui black Change">
<Button basic>
<Icon name="minus" color="white" />
</Button>
<Button className="btn" basic>
<Icon name="minus" color="white" />
</Button>
<Button basic>
<Icon name="minus" color="white" />
</Button>
</Button.Group>
</div>
);
}
}

Maybe your path to element is invalid, check my snippet:
https://codepen.io/anon/pen/QVQjMY
const {
Button,
Container,
Divider,
Header,
Icon,
Message,
} = semanticUIReact
class App extends React.Component {
render() {
return (
<Button.Group vertical className="ui black change">
<Button>
<Icon name="minus" color="white" />
</Button>
<Button className="btn">
<Icon name="minus" color="white" />
</Button>
<Button>
<Icon name="minus" color="white" />
</Button>
</Button.Group>
)
}
}
// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)
body {
background-color: red;
}
.ui.black.change button:hover{
background-color: teal!important;
}

React native text not wrapping on Native Base Title

I can't seem to get my title text to wrap:
I'm using native-base
let SearchPage = (props) => {
const menu = (
<Container>
<Header style={styles.header}>
<Left>
<Button transparent onPress={props.togglePageMenu}>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title style={styles.title} numberOfLines={2}>Search Products</Title>
</Body>
<Right>
</Right>
</Header>...
styles...:
title: {
flexWrap:'wrap',
flex: 1,
color: '#9E9E9E',
fontWeight: '200',
fontSize: 19
},
header: {
backgroundColor: '#F7F7F7'
},
What am I doing wrong?

I had to stop using <Title> from Native Base and instead use <Text> from Native Base. I guess Title has some behind the scenes styles that prevent it from wrapping.