I have a component that renders an image. The image will be different based on an api call and the data being returned.
Based on api call I will get a string such as the following:
{
assetName: 'company123'
}
I would like to pass this prop down to the component which will then reference an image we have for that name.
/images/company123.png
<img src={'/images/${assetName}.png'} />
Typically I would just import the image and use it but this is not possible when I need to change the image based on the prop value.
How can I achieve the above?
Thanks,
Lee
I think you are mixing the quotations with backticks string concatenation and it should be the backticks instead.
<img src={`/images/${assetName}.png`} />
Note: This is called template literals. (Thanks, Chris).
More on template literals
Related
I have an svg in a String variable. I get this string from an API call, so this information is dynamically present. I want to render this string via React.createElement dynamically on browser. How do I do this?
One way is to parse svg string into elements, then call React.createElement(...) for each element inside svg recursively, but writing an SVG parser doesn't seem to be optimal. Is there a cleaner way?
Thanks
You can try this: <div dangerouslySetInnerHTML={{__html:'<svg ....></svg>'}}/>
I understand that you cannot pass the source of an image to the StaticImage component as the result of a function. However, can anyone explain to me the difference between these two examples.
import React from 'react'
import { StaticImage } from 'gatsby-plugin-image' // to take image data and render it
export default function Example() {
const imageSrc = '../images/jonathan-adams.jpg'
const data = {
imageSrc: '../images/jonathan-adams.jpg',
}
return (
<div>
<StaticImage src={imageSrc} alt="alt text" /> {/* works */}
<StaticImage src={data.imageSrc} alt="alt text" /> {/* doesn't work */}
</div>
)
}
One is a direct variable reference, and the latter is referencing the same value, but through dot notation. Is dot notation a function?
Is dot notation a function?
It's not a function but it's not a constant value (at least it can't be treated as constant in the scope of the StaticImage component) hence it can't be statically analyzed, since in the end, what it's constant is data, not its nested properties. That's why imageSrc works but data isn't.
Restrictions on using StaticImage
The images are loaded and processed at build time, so there are
restrictions on how you pass props to the component. The values need
to be statically-analyzed at build time, which means you can’t pass
them as props from outside the component, or use the results of
function calls, for example. You can either use static values, or
variables within the component’s local scope.
Source: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#restrictions-on-using-staticimage
That said, you may want to use imageSrc approach or considering using GatsbyImage which accepts dynamic values (it will need a refactor and GraphQL-based approach).
I have a component where I upload image. Then I want to pass it to another component which is in another file. How can I do this? Can you explain with some code?
Can you share your code which uploads an image?
I believe you don't need to pass an image to another component if you know the path/name of an image.
If you need to pass, you can use props.
In first Component:
<AnotherComponent image={pathAndNameOfImageFile} />
In AnotherComponent, you can access image as:
this.props.image
Hope this helps you.
I'm trying to create a changeLanguage feature for my React Website. When a language ("English" or "Spanish") is selected it is passed down to all components in a props.language . When these props are received I want my components to print out text in the language indicated by the props. I have written the text in the state of the component one in Spanish and another in English. When my component renders I want it to print the right state according to what props are passed down. Any help?
You've messed up the syntax. Use this: <h4>{ this.state[this.props.language].title }</h4>
If you have multiple languages, send an object as your variable for every entity you wish to translate before hand. For example your page title may be
let greeting = {"English":"Hello","Spanish":"Hola"}
Then inside your render, you would have:
<div className="title">{this.state[this.props.language].greeting}</div>
I need to apply multiple classes to a React component without installing anything extra. Is that possible?
<Component id="test1" className="blue-text kps hide-on-small-and-down" />
I also tried
<Component id="test1" className={`blue-text kps hide-on-small-and-down`} />
But nothing works.
I have been searching for hours but did not find anything that does not require extra installations.
Please do not downvote without explaining why.
Thank you
When you add a className directly to a component, it is passed to that instance of the component as a prop accessible inside the component as this.props.className, and it's up to you to apply that class to actual DOM elements inside your component.
Remember that a React component is not an actual DOM element, but a higher-order logical construct that will be translated into one or several DOM elements (while also adding behavior, etc.). CSS classes only apply to DOM elements.
I see a wrong usage of className in your code. className stands for standard class attribute in standard html. Quoting the documentation.
"To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like , , and others."
It is for regular DOM and SVG elements where you can use className attribute.
Example Fiddle
<div className="one two three">
This is the {this.props.name}
</div>
Example usage.
Adding another point I don't think using className to pass props down to child elements is a good idea since the className is serving a purpose here.