I have my custom tab navigation in React.js. I want to change the background color of the active tab using conditional rendering or state change. I tried passing state for color but nothing is changing in CSS. Here is my code link:
https://stackblitz.com/edit/reacttabs
Please help!
you have to conditionally style the li element
first define a variable for active tab style
var active = Object.assign({},tabStyles);
active.backgroundColor = '#000';
then inside the render conditionally call the desired style
<li style={this.state.active == '1' ? active : tabStyles} onClick={() => {this.toggle('1')}}>A</li>
<li style={this.state.active == '2' ? active : tabStyles} onClick={() => {this.toggle('2')}}>B</li>
I fixed some errors, so here is a final working result
RESULT
Related
{
this.DimensionDialogOpened = event.detail.value;
//console.log("dialog opened");
}
}"
${dialogRenderer( () => html
`
`
)}
>
</vaadin-dialog>
I divided the screen into 3 and i expect the dialog to be shown in the right end div,
when someone click on a buttoon
If you want apply style to your component pass style prop to component and set it with the help of styleMap() method from lit.
I am trying to make a quiz app using React.
I am currently working on the main quiz page where I have 4 buttons, and each of the buttons denotes an answer I'm importing from a question bank.
I want the current selected button to be highlighted, and for this I am currently using a state for each button. Is there any way to just use one state and deal with all four of the buttons, as this way is too tedious and cannot be used for a large number of such buttons? Also, I want only one button, the one the user selects finally, to be highlighted. So for this reason I need to set the state of all the other buttons to null, which makes the task even more tedious.
Here is the div containing the buttons
<div>
<button className={selected1} onClick={() => dealingWithOptions("A")}>{questions[currentQuestion].optionA}</button>
<button className={selected2} onClick={() => dealingWithOptions("B")}>{questions[currentQuestion].optionB}</button>
<button className={selected3} onClick={() => dealingWithOptions("C")}>{questions[currentQuestion].optionC}</button>
<button className={selected4} onClick={() => dealingWithOptions("D")}>{questions[currentQuestion].optionD}</button>
</div>
Here is the function dealing with the options clicking
const [selected1,setSelectedButton1] = useState("")
const [selected2,setSelectedButton2] = useState("")
const dealingWithOptions = (op) => {
setOptionChosen(op);
if (op=="A") {
setSelectedButton1("selected1");
setSelectedButton2("")
setSelectedButton3("")
setSelectedButton4("")
} else if (op=='B') {
setSelectedButton1("");
setSelectedButton2("selected2")
setSelectedButton3("")
setSelectedButton4("")
} else if (op=='C') {
setSelectedButton1("");
setSelectedButton2("")
setSelectedButton3("selected3")
setSelectedButton4("");
}
else if (op=='D') {
setSelectedButton1("");
setSelectedButton2("")
setSelectedButton3("")
setSelectedButton4("selected3");
}
}
It can be solved and optimized in many ways. I am trying to give what suit your current code most.
I assume you have a state that stores choosen option.
Now update all the button like this
<button className={choosen == "A" ? "selected" : "" } onClick={() => dealingWithOptions("A")}>{questions[currentQuestion].optionA}</button>
Here choosen is the state where the selected option is being stored.
Explanation: Here what we are doing is, we are matching for each button that if it is the selected button then add the selected class else add nothing.
I would suggest having one state, that stores the chosen option (so either A, B, C or D) and then in your JSX part you have a condition that assigns the classname "selected" to the appropiate button.
If the selection changes so will the state, which triggers a rerender (so you don't even have to take away the "selected" class, since it will just be assinged to (and only) the right one on rerender
I'd suggest you set one piece of state to maintain the selected button.
setSelectedButton('A')
Or undefined if none is selected
Then,
<button className={selectedButton === 'A' ? 'selected1' : ''}>...
That said for conditional classes I'd use something like clsx rather than building class strings manually
e.g.
<button className={clsx({selected1: selectedButton === 'A'})}>...
Several ways to achieve this. You can set one state: const [selectedId, setSelectedId] = useState("")
Define the function: const selectHandler = (e) => setSelectedId(e.target.name)
On your buttons call the function and set the state to the Id: <button className={selectedId === "a" && "selected"} name="a" onClick={() => setSelectedId("a")}>Button A</button> For the rest of the buttons, change the name as well as the parameter passed to the function. Also the string inside the className comparison
I am using React Materialize and React Router Dom. I'm trying to show navlinks to only authenticated users, so I'm using conditional rendering. But if I do it like below, navlinks are rendered vertical, not horizontal as usual. Is there a solution for that? Thanks
<Navbar>
{isAuthenticated && (
<>
<NavLink to="/locations" href="/locations">
Locations
</NavLink>
<NavLink to="/categories" href="/categories">
Categories
</NavLink>
</>
)}
</Navbar>
Looks like the Navbar component is rendering all of its children inside li elements. When you wrap them in a fragment, the component considers this as its only child element and puts all of the NavLink elements in a single li.
I can think of two simple approaches to handle this:
If there are only a few links, you can do conditional rendering for them:
<Navbar>
{isAuthenticated && (<NavLink to="/locations" href="/locations">Locations</NavLink>)}
{isAuthenticated && (<NavLink to="/categories" href="/categories">Categories</NavLink>)}
</Navbar>
However, this solution is not reliable, especially if you have a lot of links.
Store the NavLink elements in some array and conditionally add the auth-dependant items:
// In the component:
const links = [/* some public links */];
const privateLinks = [
// Don't forget keys. The numbers here are only for example.
<NavLink key={1} to="/locations" href="/locations">Locations</NavLink>,
<NavLink key={2} to="/categories" href="/categories">Categories</NavLink>
];
if(isAuthenticated){
links.push(...privateLinks);
}
// In the template:
<Navbar>{links}</Navbar>
The logic with the links arrays is pretty trivial (with setting private links as the last items) only to keep the demo more simple.
In a react application how to dynamically change css of a button when a form input validation fails(There are lot of input fields which accept marks)
You can do it like this
<button style={{backgroundColor: this.state.error ? 'red' : 'green'}}>Save</button>
or change the class based on the error state and style in the css file like this
<button className={this.state.error && 'error'}>Save</button>
Hope this helps
PS this.state.error assumes you are using a class component
Also you can give className conditionally. If you don't want to set anything when condition is false, then just leave as empty string ''
<button className={ this.state.something ? 'first-class' : 'second-class' }>Clicker</button>
If you want to add a className attribute conditionally, then
<button { ...(booleanValue && { className: 'some-class' }) }>Clicker</button>
I need to implement a Bootstrap-style collapsible panel in React that displays arrow glyphs in the panel header similar to this No JS required example.
I've implemented most of this functionality using react-bootstrap in an unintended way, that results in this browser warning:
< a> cannot appear as a descendant of < a>. See ProjectInfo > a > ... > Panel > a.
Here is the render function of my component:
render() {
const projectHeader =
<a className="accordion-toggle collapsed">
<h4 className="panel-title">Project Information</h4>
</a>;
return (
<Accordion>
<Panel header={projectHeader} eventKey="1">
Project info goes here.
</Panel>
</Accordion>
);
}
Can the requirement for toggling panel header icons be be met using react-bootstrap? If so, how? If not, how is it done using React?
UPDATED 07-DEC-2017: I solved my problem by adding an anchorClass property to the react-bootstrap Panel component in a forked repo.
This is final render function of my component:
render() {
const header = <h4>Project Information</h4>;
return (
<PanelGroup accordion>
<Panel header={header} anchorClass="panel-toggle" eventKey="1">
Project info goes here.
</Panel>
</PanelGroup>
);
}
The panel-toggle classes were defined like those in the No JS required example.