Pass parameter to dynamic import react - javascript

I'm writing a react app, with mobx and framework7, and using code splitting in some of my imports, and I haven't found anything on this, but i want to know if there's a way for me to use a variable inside a import, something like this code:
const Slider = import("../parts/Slider").then( Slider =>
<Slider>
{
//sources would be an array of urls
sources.map( (source, i,) =>
<div className="slider" key={i} style={{position:'relative'}}>
<img className="picture" src={source} alt=""/>
</div>
)
}
</Slider>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>

You should just use normal import and pass parameters to your React component. Why not to do something like:
import Slider from "../parts/Slider";
const SliderComp = ( {sources}, ) =>
<Slider>
{
//sources would be an array of urls
sources.map( (source, i,) =>
<div className="slider" key={i} style={{position:'relative'}}>
<img className="picture" src={source} alt=""/>
</div>
)
}
</Slider>
export default SliderComp;
and to use it in other file:
import Slider from './SliderComp'
...
<Slider sources={arrayOfSources} />

Related

how to display all image in array react js

how to display Img array all image in react js
data***
import im1 from "../Image/10007.jpg"
export const Data =[
{
name:"aminur",
Img:[im1,im1,im1]
}
]enter code here
code :
import React from 'react'
import "./Content.css"
import { Data } from './data'
const Content = () => {
return (
<div className='content'>
{Data.map((item)=>{
return(
<div className='text'>
<img src={item.Img[0]} alt="" />
</div>
)
})}
</div>
)
}
export default Content
What I understood from your question is how to display all the images under Img array which is inside an another array of objects.
import React from 'react'
import "./Content.css"
import { Data } from './data'
const Content = () => {
return (
<div className='content'>
{Data.map((item)=>{
return(
<div className='text'>
{item?.Img.map(image=>(
<img src={image} alt="" />
))}
</div>
)
})}
</div>
)
}
export default Content

can't import dynamic value inside curly braces - Zero to Mastery React

it's my first question on StackOverflow; quite basic
I'm studying the "Zero to Mastery" react course, and I can't understand why I can't use ${} or {} inside the image source, I mean the props.monster.id
import "./card.styles.css";
export const Card = (props) => (
<div className="card-container">
<img src={"https://robohash.org/${props.monster.id}?set=set2"} />
<h1> {props.monster.name} </h1>
</div>
);
and this is its brother (Sorry for my form of question)
import { Card } from "../card/card.component";
import "./card-list.styles.css";
export const CardList = (props) => {
return (
<div className="card-list">
{props.monsters.map((monster) => (
<Card key={monster.id} monster={monster} />
))}
</div>
);
};
You have to use backticks instead of quotes to concatenate string and variables:
export const Card = (props) => (
<div className="card-container">
<img src={`https://robohash.org/${props.monster.id}?set=set2`} />
<h1>{props.monster.name}</h1>
</div>
);
<img src={`https://robohash.org/${props.monster.id}?set=set2`} />
replace the "" with backticks like i did in the example

Dynamic loading of images in React JS

I am trying to dynamically get images from my images folder based on some information retrieved from the database. Gone through as many resources as I could but still unable to solve the problem. Here's my code:
import scimitar from "../../images/scimitar.png";
import defender from "../../images/defender.png";
import arrows from "../../images/arrows.png";
import cape from "../../images/cape.png";
import platebody from "../../images/platebody.png";
const ItemCard = ({ item }) => {
return (
<div>
<p key={item.id}>ID: {item.id}</p>
<p>Name: {item.name}</p>
<p>{item.examine}</p>
<p>
<Link to={`/items/${item.id}`}>{item.name}</Link>
</p>
<img src={require(item.name)} alt={item.examine} />
</div>
)
}
const ItemList = () => {
const [items, setItems] = useState(null);
const populateItems = async () => {
const data = await getItems();
setItems(data);
};
useEffect(() => populateItems(), []);
return (
<div>
{items &&
items.map((item, index) => (
<ItemCard item={item} key={index} />
))
}
</div>
)
}
It looks like there are a couple of issues going on. Using template literals like
<img src={`../../images/${item.name}.png`} alt={item.examine} />
won't work either. The reason why is src doesn't take in a path to picture, it looks at a url your website uses. You'll need to setup your React app to serve public images (e.g. make sure something like localhost:1337/images/schimitar.png works).
Only then can you reference it using
<img src={`/images/${item.name}.png` />
To serve static files in create-react-app check out this link. If you have another setup you'll need to use something like babel-plugin-file-loader to serve public assets.
Not sure why this worked but I placed the path of the image in a variable before passing it to the src path of the image tag.
const ItemCard = ({ item }) => {
const imageItem = `/images/${item.name}.png`;
return (
<div>
<p key={item.id}>ID: {item.id}</p>
<p>Name: {item.name}</p>
<p>{item.examine}</p>
<span>Quantity: {item.quantity}</span>
<p>
<Link to={`/items/${item.id}`}>{item.name}</Link>
</p>
<img src={imageItem} alt={item.examine} />
</div>
)
}
export default ItemCard;
<img src={item.name} alt={item.examine} />
Try the following code if you are trying to get the image from a static path.
import image1 from 'images/image1.png';
<img src={image1} alt="image1" />
If you are trying to dynamically add the image then try the following code,
const imgName = "image1.png"
return (
<div>
{ imgName && <img src={`images/${imgName}`} alt="imgName" /> }
</div>
)

How can I override ExpansionPanelSummary deep elements with styled-components?

Using the docs/examples for overriding Material UI styling with styled-components, I've managed to style the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails.
However, when I use the same technique to return an overridden ExpansionPanelSummary from a function passed to styled(), the ExpansionPanelSummary moves in the DOM and the whole ExpansionPanel no longer renders correctly.
The technique in question, as applied to ExpansionPanel (this works as expected, on the container ExpansionPanel):
import MUIExpansionPanel from '#material-ui/core/ExpansionPanel';
export const ExpansionPanel = styled(props => (
<MUIExpansionPanel
classes={{expanded: 'expanded'}}
{...props}
/>
))`
&& {
...root style overrides
}
&&.expanded {
...expanded style overrides
}
`;
The typical DOM (with class names abbreviated) for ExpansionPanel and friends:
<div class="MuiExpansionPanel...">
<div class="MuiExpansionPanelSummary..." />
<div class="MuiCollapse-container...>
<div class="MuiCollapse-wrapper...>
<div class="MuiCollapse-wrapperInner...>
<div class="MuiExpansionPanelDetails..." />
</div>
</div>
</div>
</div>
The DOM when I apply the above technique to ExpansionPanelSummary:
<div class="MuiExpansionPanel...">
<div class="MuiCollapse-container...>
<div class="MuiCollapse-wrapper...>
<div class="MuiCollapse-wrapperInner...>
<div class="MuiExpansionPanelSummary..." />
<div class="MuiExpansionPanelDetails..." />
</div>
</div>
</div>
</div>
For completeness, here's a minimal repro of what I'm doing to ExpansionPanelSummary, that triggers the DOM switch:
export const ExpansionPanelSummary = styled(props => (
<MUIExpansionPanelSummary
{...props}
/>
))``;
And my JSX is standard ExpansionPanel setup:
<ExpansionPanel>
<ExpansionPanelSummary>
Summary Label
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<div>Some Content</div>
</ExpansionPanelDetails>
</ExpansionPanel>
This difficulty is independent of using styled-components and just has to do with wrapping ExpansionPanelSummary in another component.
You can similarly reproduce this with the following wrapping of ExpansionPanelSummary:
const MyCustomSummary = props => {
return (
<ExpansionPanelSummary {...props} expandIcon={<ExpandMoreIcon />}>
<Typography>{props.text}</Typography>
</ExpansionPanelSummary>
);
};
There are several component groups like this where a Material-UI parent component looks for a particular type of child component and treats that child specially. For instance, you can find the following block in ExpansionPanel
if (isMuiElement(child, ['ExpansionPanelSummary'])) {
summary = React.cloneElement(child, {
disabled,
expanded,
onChange: this.handleChange,
});
return null;
}
Fortunately, Material-UI has a straightforward way to tell it that your custom component should be treated the same as a particular Material-UI component via the muiName property:
MyCustomSummary.muiName = "ExpansionPanelSummary";
or in your case it would look like:
export const ExpansionPanelSummary = styled(props => (
<MUIExpansionPanelSummary
{...props}
/>
))``;
ExpansionPanelSummary.muiName = "ExpansionPanelSummary";

Passing div data from map in other component

I am creating Test component using Carousel component.
In Carousel component I am passing div with data from props.But I want to pass img src from testData props as follows.
export default class Test extends Component {
render() {
const { testData } = this.props;
return (
<div>
<Carousel>
{
testData.length && testData.map((a) => (
<div><img src=
{a.link} />
</div>
)
)
}
</Carousel>
</div>
);
}
}
testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]
When I do this as follows then it is working fine.
<div> <img src="/test1.jpg" /></div>
<div> <img src="/test2.jpg" /></div>
<div> <img src="/test3.jpg" /></div>
What I am doing wrong using testData.
Regular JavaScript comments are not allowed in JSX:
//<div> <img src="/test1.jpg" /></div>
//<div> <img src="/test2.jpg" /></div>
//<div> <img src="/test3.jpg" /></div>
To comment in JSX you must wrap in { }.
{ /*<div> <img src="/test1.jpg" /></div>
<div> <img src="/test2.jpg" /></div>
<div> <img src="/test3.jpg" /></div>*/ }
import React, { Component } from 'react'
import {Carousel} from 'react-bootstrap'
export default class Test extends Component {
render() {
const testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}]
return (
<Carousel>
{testData.length && testData.map((a) =>
(<div>
<img src={a.link} />
</div>))}
</Carousel>
);
}
}
This piece of code is working fine, So I think the problem lies in how you are passing testData through props.
If you could provide the code where you are passing the testData as props a solution can be found out.
I finally got the issue.
In first case when I am using static data as
testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]
It will get showed to page every time component rendered.
But in second case
const { testData } = this.props;
testData is set by API call.So it will not get fetched when component rendered first.To resolve this issue I did this
if (!caurosalData.length) {
return null;
}
Now it is working fine

Categories