How to add class onclick button [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 days ago.
Improve this question
In my app I need to add sidebar, for example you need to edit something and you'll do it in a sidebar. The problem is that I don't know how to do this.
I tried a lot of things but the idea is that by clicking on button I can't add class '-active' to my sidebar panel.
// src/app.js
function App() {
...
<div className="basic_layout__sidepanel">
<SidePanel></SidePanel>
</div>
...
// src/pages/Companies/Companies.js
function Companies() {
....
const actionButtons = () => {
return (
<React.Fragment>
<Button
icon="pi pi-pencil"
className="p-button-rounded p-button-info mr-2"
onClick={MyFunction}
></Button>
</React.Fragment>
);
};
So how to add '-active' class to "basic_layout__sidepanel" from app.js by clicking on button from companies.js

The steps to accomplish this are very simple through. But we have to keep track of somethings first. Let’s assume this is you component structure
function App () {
// some functions here…
return (
<>
<button></button>
<SidePanel />
</>
);
}
Change it to something like
import React from ‘React’
function App () {
const [active, setActive] = React.useState(false);
const handleClick = () => {
setActive(a => !a);
}
return (
<>
<button onClick={handleClick}></button>
<SidePanel active={active} />
</>
);
}

Related

How to do router.push() on onScroll event in NEXT 13 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 days ago.
This post was edited and submitted for review 6 days ago.
Improve this question
export default function Home() {
const router = useRouter()
const handleScroll = (e) => {
e.preventDefault()
router.push("./SecondPage")
}
return (
<div className={styles.container} onScroll={handleScroll}\>
...
</div>`
)
}
This is my homepage (page.jsx) and I wanna change pages onScroll down event
Try this code
And if you are using latest version of react then try to use useNavigate instead of useRouter
export default function Home() {
const router = useRouter()
React.useEffect(() => {
window.addEventListener("handleScroll", handleScroll);
}, []);
const handleScroll = (e) => {
e.preventDefault()
router.push("./SecondPage")
}
return (
<div className={styles.container} onScroll={handleScroll}\>
...
</div>`
)
}

how can i hide an element on screen with reactjs [duplicate]

This question already has answers here:
Show or hide element in React
(34 answers)
Closed 19 days ago.
I would like a text to be displayed on the screen and only be hidden when pressing a button, but I don't know how. I thought of using useState like this:
const [textVisibility, setTextVisibility] = useState(true)
<button onClick={() => setTextVisibility(false)} />
the problem I found is that when clicking on the button the page will be rendered again and the visibility value will be the default value (true). How can I do that?
const App(){
const [isVisible, setIsVisible] = useState(false)
return (
<>
{isVisible ? <label> This text will be shown on button click </label> : null
}
<button onClick={()=>setIsVisible(true)}>click to show </button>
</>
)
}
Idk what are you experiencing but for me it works fine the following code:
import React from 'react';
import {useState} from 'react';
export function App(props) {
const [textVisibility, setTextVisibility] = useState(true)
return (
<div className='App'>
{textVisibility && <h1 onClick={() => setTextVisibility(!textVisibility)}>Hello React.</h1>}
<button onClick={() => setTextVisibility(false)}>Invisible</button>
<button onClick={() => setTextVisibility(true)}>Visible</button>
</div>
);
}

Why is there no output when I try mapping an array? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
So im creating a webpage that utilizes the REST Countries API. I have a useEffect that renders on the first run and store the data into a useState array but when I try mapping it in the body for some reason my ternary operator returns null saying that there is no data in my useState variable. Am I using the ternary operator right? I want to find out why my variable is null when there is clearly data in the variable
code:
const LightMode = () => {
const [data, setData] = useState([])
useEffect(() =>{
axios.get('https://restcountries.com/v3.1/all').then(res=>{
let toInsert = res.data.map((country) =>({
name: country.name.common,
population: country.population,
region: country.region,
capital: country.capital,
image: country.coatOfArms.png
}))
setData((prev) => [...prev, ...toInsert])
})
}, [])
console.log(data)
return(
<div>
<NavigationBar />
<div className='temp'>
{data ? data.map((country) =>{
<div>
country.name
</div>
}) : null}
</div>
</div>
)
}
export default LightMode;
You are not returning anything in your map. You either need to remove the {} or add a return statement. Here I replaced the {} with () to auto return your JSX. You will also want to add {} around the country.name to make that javascript.
return(
<div>
<NavigationBar />
<div className='temp'>
{data ? data.map((country) =>(
<div>
{country.name}
</div>
)) : null}
</div>
</div>
)

How to set a function name in a React component? [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 1 year ago.
I recently started to play around with React and am facing an issue in the code below. Here is my component, the question will follow:
class CustomButton extends Component {
render() {
const {number,parent} = this.props;
return (
<button className="button"
onClick={() => parent.onEvent123()}>Option{number}
</button>
)
}
}
export default CustomButton;
This component is already working. I can use it like that:
<CustomButton number={123} parent={this.props} />
And the onClick line maps to:
onClick={() => this.props.onEvent123()}>Option123
But here is what I really want:
<CustomButton number={789} parent={this.props} />
mapping to:
onClick={() => this.props.onEvent789()}>Option789
for any number (here 789) I pass.
I have tried something like:
return (
<button className="button"
onClick={() => parent.onEvent{number}()}>Option{number}
</button>
)
in order to parameterize the function name, but it doesn't work. What is the way to get what I want? Of course I would not want to pass the hard coded function name.
I have the feeling there has to be a solution. But I am still too beginner in React.
try:
return (
<button className="button"
onClick={() => parent[`onEvent${number}`]()}>Option{number}
</button>
)

Is there a way to trigger an event when mapping out a Component so that it only applies a style to that specific component?

I'm building a quiz app and I have some components mapped out that when the user clicks an answer it highlights only the one they clicked but so far I've only gotten to work either on hover or just apply it to everybody.
export default function Quiz() {
const [currentQuestion, setCurrentQuestion] = useState(4);
const [currentAnswer, setCurrentAnswer] = useState("");
const handleClick = e => {
setCurrentAnswer(e.target.value);
};
const question = quiz.questions[currentQuestion];
return (
<div className="container">
<Progress total="3" current="1" />
<Question question={question.name} />
<Answers
question={question}
currentAnswer={currentAnswer}
handleClick={handleClick}
/>
<button className="btn btn-primary">Confirm and Continue</button>
</div>
);
}
function Answer(props) {
let classes = ["answer"];
if (props.selected) {
classes.push("selected");
}
console.log(props.selected);
console.log(classes.join(" "));
return (
<button
value={props.letter}
className={classes.join(" ")}
onClick={props.handleClick}
>
<span className="letter">{props.letter}</span>
{props.answer}
</button>
);
}
function Answers(props) {
return (
<>
{props.question.options.map((e, index) => {
const answer = index + 1;
return (
<>
<Answer
letter={answer}
answer={e.name}
selected={answer}
handleClick={props.handleClick}
/>
</>
);
})}
</>
);
}
This is how my project is setup so far and have been stuck with this problem for a while now
Just do an equality check!
Something along the lines of
selected={ props.currentAnswer === answer }
You just need to track whichever answer is selected and set the logic so that your Answer component knows it is selected. You are already doing the check of adding selected classname if selected is true.
EDIT: SideNote: Don't forget to add key props to your mapped elements! :D Read the documentation for the why.

Categories

Resources