We Keep Coding

Underline <a> tag with React

I was Wondering how to give style to two tags in react without using the className(as not using className is the main challenge).
Menu Here
Click Me
So for the "curry dish," it should only underline when hovering.
And for the click me it should be underlined first and disappear while hovering on it.
I got both underlines removed using the code below. But still can't figure out how to apply separate styling please help.
a: hover {
text-decoration: underline;
}

**Tags in react without using the className:**
<span style={{color: "red",cursor: "pointer",
text-decoration: underline !important }}>
Menu Here
</span>

If you're not using CSS you can do this with a simple stateful react component.
const UnderlineHover = ({children, ...rest}) => {
const [isHover, setIsHover] = useState(false);
const style = isHover ? {textDecoration: "underline"} : {};
return <a onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
style={...style}
{...rest}
>{children}</a>;
};

you can try with state and style like=>
const [hover,setHover] = useState("")
const handleMouseEnter =()=>{
setHover(true)
}
const handleMouseExit =()=>{
setHover(false)
}
const linkStyle = {
text-decoration: hover? underline:none;
}
return(
<a href="" style={linkStyle} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseExit}>Menu Here</a>
<a href="" style={linkStyle} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseExit}>Click Me </a>
)
Hope this will help to solve out your problem. If you still facing issue just lemme know, i will help you more.
Thanks

React, How to replace Unordered list bullets with images in the TreeView?

I am using react. I am able to generate a tree from xml file. Currently treeview is showing as an unordered list. How to replace that with images?
Please find my sandbox: https://codesandbox.io/s/falling-waterfall-2irybs
The code is working fine in Visual Studio. I am not sure how to use sandbox, not able to understand sandbox error.
Images are also included in the Sandbox.
On page load tree is collapsed showing service and sales two nodes with PLUS image.
when node is open, image will convert into minus image. After expand, all opened nodes will show minus image except the last one. Last node will show paper image.
Please help in fixing my treeview code.
Thanks a lot.

You would need to re-style the li element's ::marker selector. If you are open to using a 3rd-party css-in-JS solution then I would suggest using the styled-components package.
Here's an example implementation:
import styled from "styled-components";
import plus from "./plus.gif";
import minus from "./minus.gif";
import paper from "./paper.gif";
const StyledLI = styled.li`
::marker {
content: url(${({ expanded, isLeaf }) =>
isLeaf ? paper : expanded ? minus : plus});
}
`;
Pass expanded and isLeaf props to the new styled component when rendering.
class TreeNode extends React.Component {
render() {
const { node, onToggle } = this.props;
const activeChildren =
node.isActive && node.nodes.length ? (
<ul>
{node.nodes.map((node) => (
<TreeNode
id={node.id}
key={node.key_id}
node={node}
onToggle={onToggle}
/>
))}
</ul>
) : null;
return (
<StyledLI
id={node.id}
expanded={node.isActive} // <-- expanded if active
isLeaf={!node.nodes.length} // <-- leaf node if no children nodes
linkpagename={node.linkpagename}
key={node.key_id}
onClick={(event) => {
event.stopPropagation();
onToggle(node);
}}
>
<Link
to={node.linkpagename}
style={{ textDecoration: "none", color: "#000000" }}
>
{node.description}
</Link>{" "}
- {node.key_id} - {node.linkpagename}
{activeChildren}
</StyledLI>
);
}
}

React Accordion Update height when child DOM has new Table to render

In the image as you can see, I have a Foo page, where I have 10 Accordions, In one of the Accordions there is a Form component, When I submit the Form it calls a remote API and returns some JSON data, I convert it to a Table of content and want to show it under the Form.
The problem is I can show the Table after toggling the Accordion again after the submit button clicked, as I have set the maxheight in the onClick.
const [activeState, setActiveState] = useState("");
const [activeHeight, setActiveHeight] = useState("0px");
const toogleActive = () => {
setActiveState(activeState === "" ? "active" : "");
setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight}px`)
}
return (
<div className={styles.accordion_section}>
<button className={styles.accordion} onClick={toogleActive}>
<p className={styles.accordion_title}>{title}</p>
</button>
<div ref={contentRef}
style={{ maxHeight: `${activeHeight}` }}
className={styles.accordion_content}>
<div>
{content}
</div>
</div>
</div>
)
I have used context also to share the useState hook between Accordion and Form components to update the height.
<UpdateHeightContext.Provider value={{updateHeight, setUpdateHeight}}>
<Accordion title="Find your Data" content={< FormWithTwoInput firstLabel="FirstName" secondLabel="LastName" buttonColor="blue" buttonText="Check Deatils"/>} />
</UpdateHeightContext.Provider>
Is there any way to update the Accordions height dynamically when I receive the response from the API? Other than toggling it again. A similar question was asked here React accordion, set dynamic height when DOM's children change unfortunately no one replied.

Even though the working around what I have found is not a robust one, but it is working completely fine for me. If someone stumbles upon this same issue might find this useful.
import React, { useState, useRef } from 'react'
const Accordion = ({ title, content }) => {
const [activeState, setActiveState] = useState("");
const [activeHeight, setActiveHeight] = useState("0px");
const contentRef = useRef("form")
const toogleActive = () => {
setActiveState(activeState === "" ? "active" : "");
setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight + 100}px`)
}
return (
<div className={styles.accordion_section}>
<button className={styles.accordion} onClick={toogleActive}>
<p className={styles.accordion_title}>{title}</p>
</button>
<div ref={contentRef}
style={{ maxHeight: `${activeHeight}` }}
className={styles.accordion_content}>
<div>
{content}
</div>
</div>
</div>
)
}
Accordion.propTypes = {
title: PropTypes.string,
content: PropTypes.object,
}
export default Accordion
I have hardcoded some extra space so that while the dynamic response is accepted the Table content is shown. In the CSS module file, I have kept the overflow as auto, earlier it was hidden.
.accordion_content {
background-color: white;
overflow: auto;
max-height: max-content;
}
As a result, the Table is appearing dynamically and the user can scroll inside the Accordion if my Table needs larger space.

How to correctly style and apply hover for infinitely nested nav in React?

I have the infinite structure working, but I can not seem to get it to correctly apply hovers to display each sublist correctly.
export default function InfiniteNav({ links }){
function Links(props) {
const { link } = props
const { title, subLinks, path } = link
return (
<li className={`navItem`}>
<Link to={path} >
{title}
</Link>
{subLinks && <ul className={`navLinks`}>
{subLinks.map((slink, i) => <Links key={i} link={slink} />)}
</ul>}
</li>
)
}
return (
<nav className="navContainer">
<ul className="mainNav">
{links.map((link, i) => <Links key={i} link={link} />)}
</ul>
</nav>
)
}
This will render a static nav with all the list and sub list displayed. What I want to do is hide all sublist until their parent is hovered over. Then you would be able to keep hovering over parents down the tree displaying their list (if they have one).
Problems I run into are that when I leave one parent to hover one of it's children in the list it disappears. I am trying to use onMouseEnter and onMouseLeave but not sure if that is the correct path so I'm not going to include that code to detour anyone.

a css approach for this:
.navItem:not(:hover) .navLinks {
display: none;
}

Getting two components to sit horizontally in react while using event object

I am using the event object to try and create three images next to each other. I am running into an issue where because they are returned in order, they keep stacking vertically when I want them to be in two rows, with three items per row.
Here is my current code for App.js:
function App() {
let imgGen = [{img:""},{img:""},{img:""},{img:""},{img:""},{img:""}];
let images = imgGen.map((image1) => {
return <GenSlide data={image1}/>
});
return (
<div className="App">
<Entry />
{images}
</div>
);
}
Here is my code for the GenSlide class:
function GenSlide (props) {
return (
<div class="imagePackage">
<img alt="this image is busted" width="300px" src={props.data.image}/>
<button id="theButton">Save</button>
</div>
)
}

You should use the flexbox or grid layout to accomplish this.
By default a div is a block element which puts line breaks before and after each element. If you set them to inline-block there will still be spacing in between them.
For more info read https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model