I face a problem with react.js, I'm new to it and haven't seen such questions as mine so far.
My problem is that I wanted to reproduce epic games website to learn react, but I can't manage to do the dropdown layout menu.
So here is what I've done so far (tried many things but my final result is this) :
const [selectedMenu, setSelectedMenu] = useState(null);
And the html part :
<div className="col-2" onMouseEnter={() => setSelectedMenu(1)}>
<div className="wrapper">
<li className="select-none bot_line">news & events</li>
</div>
{selectedMenu === 1 && (
<div
className="bot_menu"
onMouseEnter={() => setSelectedMenu(1)}
onMouseLeave={() => setSelectedMenu(null)}
>}
But this is not what I want exactly, I have 7 element to set from hidden to visible.
The way I want to do it is by targeting each child components with the "onMouseEnter" function through the col-2 element.
What I wish is to change the previous class to a new one by hovering col-2 to show the bot_menu onMonseEnter.The css part is done, my trouble is only with the react part.
So the previous className to be "hidden" and onMouseEnter set it to "visible" className.
And to do it by targeting child elements so I only have to do it once and not 7 times.
Please
Related
I have a react function that puts out a div. This div is a draggable, and it should also be editable. I have tried using contentEditable, which makes the div editable when set to 'true', but then i can no longer drag the item, only edit it.
Is there a way to make the div "editability" to toggle on and off, for example using an onclick to turn contentEditable to 'on', and a doubleClick to turn contentEditable to 'true', enabling the dragging?
return (
<div
onDoubleClick contentEditable={true} // needs to be toggleable, in some way
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
{item.content};
</div>
)
This is how you would do it with hooks. I assume you are using them.
const [contentEditable, setContentEditable] = React.useState(false)
return (
<div
onDoubleClick={()=> setContentEditable(!contentEditable)}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
{item.content};
</div>
)
I am trying to create a 'simple' schedule of events for a React app. I'm using this Codepen for inspiration. There aren't events for every day and some days have more events than others.
I was finally able to create one 'date' header (on the left) for each date, without repeating, and to then display one time block on the right for all of the events in that day. However, I can't get it to render properly. I've tried everything I can think of in terms of padding, margins, alignment, etc. I've also tried moving things into and out of different divs to see if that was the issue.
I'm not sure how to get this issue to display in a Codepen or JSFiddle with the JSX and React components, etc. I've copied the code into this Codepen regardless -- hopefully it's enough to convey the issue. This is the main relevant section:
render() {
this.restructureData();
return (
<div>
<br></br>
<h1>Availability</h1>
{/* {this.renderTimeslots()} */}
<div className="schedule-div">
<ul className="main">{this.betterRenderTimeslots()}</ul>
</div>
</div>
);
betterRenderTimeslots = () => {
const newObject = this.restructureData();
let allDays = [];
for (let date in newObject) {
let onThisDay = (
<>
<h3>{date}</h3>
<li className="events">
<ul className="events-detail">
{newObject[date].map(timeslot => {
return (
<li>
{<span className="event-time">{timeslot.hour}:00</span>}
</li>
);
})}
</ul>
</li>
</>
);
allDays.push(onThisDay);
}
return allDays;
};
The accompanying CSS is pasted into the Codepen above. Here's a screenshot of what it looks like for me.
Thank you!
Your H3 header is not inside LI element, that's why it's falling out
I have a header div and alert div in my app. The alert div has a z-index of 2 to stack on the front on the header, so as to show notifications inside it.
However, this is making the header div unclickable. Both header and alert divs are positioned absolutely.
Alert is overlayed to the right of the header on top of it.
New to React. In angular would do with *ngIf (or) set the display to none on alert div when the notifications array length is zero or null.
Not sure how to do here.
index.jsx
<div className={classname('aclass', 'bclass')}>
<div classname={styles.notificationWrapper}>
{this.notificationArray.map( (alert) => (
<pxAlert
visible
classes={classnames(style.aert, 'alert'}>
</pxalert>
)
)}
</div>
It could be done with an inline if with logical && operator:
<div className={classname('aclass', 'bclass')}>
<div classname={styles.notificationWrapper}>
{this.notificationArray && this.notificationArray.map( (alert) => (
<pxAlert
visible
classes={classnames(style.aert, 'alert'}>
</pxalert>
)
)}
</div>
Hope this helps,
I have the following React component using Material UI:
const MyButton = ({ warningText }) => (
<Tooltip title={warningText}>
<Button>Do action</Button>
</Tooltip>
)
Currently, this shows an empty tooltip when warningText is undefined. Instead I would like to show no tooltip at all. Is there a way to conditionally surpress the tooltip in these cases?
Off course I could just use an if statement to not render the tooltip component, but this would lead to rather ugly code in my opinion.
Should be
<Tooltip title={warningText == null ? "" : warningText}>
<Button>Do action</Button>
</Tooltip>
the docs say that it won't be displayed if the string length is zero.
https://material-ui.com/api/tooltip/
Tooltip title. Zero-length titles string are never displayed.
If you're looking to manually play around for customization, you can try to use the following solution:
As per the documentation, you can use the open prop and mouse events to handle it manually.
In the following scenario, we will use state to set showing the tooltip when we enter the mouse over the element, and we will also use text && to assert that text has a value, this will prevent the tooltip from showing when text is undefined.
const [showTooltip, setShowTooltip] = useState(false);
<Tooltip
open={text && showTooltip}
onMouseEnter={() => { setShowTooltip(true) }}
onMouseLeave={() => { setShowTooltip(false) }}
placement="top" title={text}
>
<div>
{text}
</div>
</Tooltip>
Note, the mui-tooltip is not a perfect component to begin with and is not very straight forward, this solution works for me but might not work in your situation as is, I will try to put it out, you can try to make it work on your end.
If it doesn't work for you, please leave a comment and I'll try to help.
You should take a look at https://material-ui.com/api/tooltip/
There are options like
disableFocusListener
disableHoverListener
disableTouchListener
interactive
I think interactive={true} should fit your needs best
<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>
I want to create a button that changes its text based on the state of the application. I want the old text to fade out, and then the new text to fade in.
Here's a pen where I've implemented what I want in pure JS.
How would I achieve the same effect in React - or what would be the best approach?
For reference, here is my JSX:
<div className="buttons">
<div className="half">
<button className="button" onClick={this.chooseLeft}>{this.state.leftButton}</button>
</div>
<div className="half">
<button className="button" onClick={this.chooseRight}>{this.state.rightButton}</button>
</div>
</div>
Edit:
I tried with ReactCSSTransitionGroup, but it didn't work quite as expected. It added the new text, then faded out the old one while fading in the new one.
Use ReactCSSTransitionGroup, part of react's animation add-ons. It's designed for your exact use case.
Had a similar use case and ended up using a timer to update a couple state variables.
One state var to track the message text, another to track application of a fade class in the components className. The fade class basically controls opacity of the text block.
For instance:
...
// in some handler code
this.setState({fading: true}); // fade out
this.timer = setTimeout(_ => {
this.setState({msg: 'Some new text'}); // swap the text
this.setState({fading: false}); // fade back in
}, 500); // animation timing offset
// in render
render() {
const {msg, fading} = this.state;
return (
<h1 className={`${fading ? 'faded' : ''}`}>
{msg}
</h1>
);
}