I am very new to react.js and JavaScript, so apologies in advance.
When I do as following in JavaScript:
<img
style="cursor:pointer;"
title="Click to edit image"
onclick="console.log(this);"
src="data:image/png" />
I would get below as a return value.
However, if I do the same thing in React as:
<img
style={{ cursor: "pointer" }}
title="Click to edit the diagram"
onClick={() => console.log(this)}
src="data:image/png" />
I would get undefined as the return value.
I just wanted to know why this is so, and how to get the same return property value in React as JavaScript.
all attributes usually in react wrap is curly braces except strings, you can either import logo at the start of the file like this
import React from "react";
function ImageComponent() {
return <img
style={{ cursor: "pointer" }}
title="Click to edit the diagram"
onClick={() => console.log("Click")}
<img src="data:image/png;base64,putYourBase64Here" />
/>
}
export default ImageComponent;
Related
I ran into a problem with my component not re-rendering after a state change, when using props driven inline styling, on IOS/iphone (not tested on ipad).
Here is the code sandbox: https://codesandbox.io/s/confident-meitner-2sju9?file=/src/FlexboxGap.jsx
Edit: adding the code here too as requested:
import { useState } from "react";
import "./FlexboxGap.styles.css";
function FlexboxGap({ visible, containerCat, propertiesCat }) {
const [gap, setGap] = useState(0);
const [rowGap, setRowGap] = useState(0);
const [columnGap, setColumnGap] = useState(0);
function onGapChange(event) {
setGap(event.target.value);
setRowGap(event.target.value);
setColumnGap(event.target.value);
}
function onRowChange(event) {
setRowGap(event.target.value);
}
function onColumnChange(event) {
setColumnGap(event.target.value);
}
return (
<div className="main-container">
<div>
{" "}
<div>gap: {gap}px</div>
<input
type="range"
className="slider-bar"
min={0}
max={20}
value={gap}
onChange={onGapChange}
/>
</div>
<div>
{" "}
<div>row-gap: {rowGap}px</div>
<input
type="range"
className="slider-bar"
min={0}
max={20}
value={rowGap}
onChange={onRowChange}
/>
</div>
<div>
{" "}
<div>column-gap: {columnGap}px</div>
<input
type="range"
className="slider-bar"
min={0}
max={20}
value={columnGap}
onChange={onColumnChange}
/>
</div>
<div
style={{
width: "100vw",
height: "250px",
backgroundColor: "grey",
display: "flex",
flexFlow: "row wrap",
justifyContent: "flex-start",
alignContent: "flex-start",
rowGap: `${rowGap}px`,
columnGap: `${columnGap}px`
}}
>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
<div className="graph-item">item</div>
{/* This last invisible div is a hack to "force" react to re-render, by referencing the props rowGap and columnGap.
Otherwise, the rerender fails to happen on iphones. Working on Android
and desktop */}
<div className="hack-ghost">{`${rowGap}${columnGap}`}</div>
</div>
</div>
);
}
export default FlexboxGap;
While the state of rowGap and rowColumn is successfully changed, as well as the style, the div that depends on it does not get updated on iphones (fully updated).
Works on desktop and android devices.
I found a hack by adding a div that references the 2 states I need, and everything now "works".
The problem is:
1- it is hacky and
2-i am not sure i fully understand what is going on.
I thought of this hack by thinking that "i needed react to notice that the state changed inside this element".
Is it an issue with the way that inline css works // an ios implementation particularity?
Kind regards.
I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'
Here is a sample of my code:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.
Any ideas as to why the default object-fit: 'cover' won't change?
There's a prop 'objectFit' (along with 'objectPosition') that can be passed to StaticImage directly. I'd try that. My guess is that your passed styles are being overwritten inside StaticImage, but passing the direct props would fix it. https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
I had to add style={{height: "100%"}} as a prop to StaticImage in order to make an image cover a full view-height container. The image wrapper does not automatically take the whole space of the container element.
I'm working on a form that has Semantic-UI Radio toggles, and the loader and the toggle's appear to be loading in the wrong z-index.
I checked the css and the toggle contains the following
.ui.toggle.checkbox label:after {
z-index: 2;
}
while the loader is
.ui.dimmer {
z-index: 1000;
}
which seems like the appropriate behaviour. I want the toggles to be behind the loader to present the best user experience. Can anyone tell me if the current behaviour is by design or not? Trying to determine if this is a bug to be reported or a feature to be requested or if there's a problem with my implementation.
My code (edited for brevity)
import { Form, Dropdown, DropdownItemProps, Dimmer, Loader, Button, Icon, Segment } from "semantic-ui-react";
return (
<Fragment>
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="ui segments">
<PageHeader
text="Some text"
subText="Some subtext"
pageIcon="cogs icon"
/>
</div>
<Dimmer.Dimmable dimmed={loading}>
<Dimmer simple active={loading}>
<Loader>Loading</Loader>{" "}
</Dimmer>
<Form onSubmit={() => save()}>
<Form.Checkbox
label="Label 1"
checked={display}
onChange={(e, { checked }) => setDisplay(!!checked)}
toggle
/>
<Form.Input
label="Label 2"
placeholder="Placeholder"
value={data}
onChange={(e, { value }) => setData(value)}
/>
</Form.Group>
</Form>
</Dimmer.Dimmable>
</div>
</Fragment>
);
The comment helped me out. The problem was resolved using https://coder-coder.com/z-index-isnt-working/#alternative-solution-remove-positioning-from-the-content-so-it-wont-limit-the-modals-z-index from the suggestion.
I used a sticky position for the form element. Not necessarily the best solution but it sufficed for this purpose.
I have a component called DropDown Single and that has an options param Object and Database. If the Object is selected then I want to show the Autocomplete component for the name Table. If Database is selected I want it to show the autocomplete named database. I have tried to cut down the code with only the components I need to be using. The onclick itself doesn't actually do anything yet but I am assuming I will need it when I want it to show the right component.
<div className='Main UnitTestsAutoCompleteWrapper' style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<DropdownSingle
options={['Object', 'Database']}
value='Object'
name='Search for unit tests'
onclick={onChange}
/>
</div>
<div style={{marginRIght: '10px'}} >
<AutoCompleteSingle
name='Table'
label='Table'
options={autoComplete.tablesAutoComplete}
onChange={autoComplete.onTableAutoCompleteFieldUpdate}
onSelect={onSelect}
uniqueIdentifier={0}
initialValue={targetObject}
/>
</div>
<div>
<AutoCompleteSingle
name='Database'
label='Database'
options={autoComplete.databasesAutoComplete}
onChange={(e) => onFieldUpdate(e, 'database')}
onSelect={onDatabaseSelect}
uniqueIdentifier={1}
triggerOnSelectOnBackspace
/>
</div>
</div>
Use this as a simple example to guide you, you should really read the documentation. This is all covered under Conditional Rendering:
import React, { useState } from "react";
export default function App() {
const [selectValue, setSelectValue] = useState("cow");
return (
<div>
<select onChange={(e) => setSelectValue(e.target.value)}>
<option value="cow">Cow</option>
<option value="sheep">Sheep</option>
</select>
{selectValue === "cow" ? <p>Cow</p> : <p>Sheep</p>}
</div>
);
}
I am using bootstrap4 in Reactjs project, I installed bootstrap4 using npm and giving module path-link in App.js, as
import 'bootstrap/dist/css/bootstrap.min.css';
but while using tooltip, using inline styling to an icon, I can't give attribute data-toggle because of - in between them and JSX considers it two different components.
I read we can give tooltip by third party module or separate component, but I wanted to implement inline styles.
here is a code of it.
<Link to={`contact/edit/${id}`}>
<i
className="fas fa-pencil-alt "
style={{
data-toggle="tooltip", data-placement="top", title="Tooltip-not-working!",
cursor: "pointer",
float: "right",
color: "green",
marginRight: "1rem"
}}
/>
</Link>
error is due to not giving attributes as single string.
my GitHub code-link.
That's because you're giving attributes through the style tag.
It should look like this instead:
<i data-toggle="tooltip" data-placement="top" title="Tooltip-not-working!" style={{...}} />
You place attribute at wrong place. style attribute should have only camelCase property like marginTop not margin-top. and rest of the props are you passing to element should be same as html.
<i data-toggle="Your Message" style={{marginTop: '5px'}} />