I'm working on films searcher in React. The API I'm using does not have full data on every single film, some of them do not have an image. I want to put a placeholder name (possibly an image) where there should a photo, but there is no data. I do not know how to create a function that will check if the image is available. Any idea?
If you use propTypes in your React application, you can add a default there.
https://reactjs.org/docs/typechecking-with-proptypes.html
Alternatively, you can use a conditional (ternary) operator in your script as you did in your TitleComponent.jsx.
In that case you just have to import the default image to your component first.
import defaultImg form '..images/default.jpg'
Related
I'm trying to append a class to my body tag depending on the locale. So if someone visits from Spain, I will append a class which changes the Tailwind theming to match the branding of that country.
My body tag is located in a custom _document.js file. When I try to import { useRouter } from 'next/router', I get the 'breaking rules of hooks' error in React. I need this hook to detect the locale and therefore append the class if necessary.
Is it possible to use hooks in _document.js? If not, why not?
I'm new to react, I'm trying to display images from the src/images folder.
but after inserting the correct path, then also the image is not visible.
Here you can see my img tag path and on the left side folder structure
From the Image you provided, looks like you used require("path...") which is not a good way to do so, its valid tho, but not a good practice, its recommended and is common to use import X from "somewhere" syntax.
I suggest you to use either of these two ways to use images in react.
put images in public folder and use relative links in the href tag, i.e:
<img href="/images/panda.png" alt="cute panda" />
put images inside a folder somewhere inside src folder like you did in the image and import images using ES import syntax, and use imported image variable in {} expression for src prop, i.e:
import PandaImg from "../images/panda.png"
const Panda = ()=>{
return <img src={PandaImg} alt="cute panda" />
}
Here is a CodeSandbox Example may help you further explore the code in broader context.
I have this image folder:
- country
- EN
- FR
- IT
I want to import an image this way:
import image from "./country/{country}/test.png";
How can I do this?
i will always use both of the methods (require, import).
first thing is i do categorise images in 2 ways:
what i am using so may times and using it frequently.
what is rarely used.
then i will create an js file in that i do import all 1'st kind of images (frequently used). When project will load it will execute all import statements first so that time my all of the images are imported already so then whenever i need this images i do get that image from utility what i have created for importing images. that util file will be kind of this:
import CSK from "../assets/images/teamLogo/CSK.png";
import CSK_bw from "../assets/images/teamLogo/CSK-bw.png";
export function getImage(name) {
switch (name) {
case "CSK":
return CSK;
case "CSK_bw":
return CSK_bw;
}
}
so whenever i need image i just import above function with image name.
and second category images i will use as require.
The Bootstrap Table header is not aligned with the data, am I missing any style? I'm using
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
I have marked in the attached picture where this.setState is not working in a function within private method.
I've fixed the header alignment issue by
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
exists possibility and using default Bootstrap code in need component, but in this case you must use CDN links who is need for normal work of Bootstrap from index.html file in your app
I'm building a web app using React that shows the blueprint for the building you select, in an already selected campus.
I have a "Content" component that loads the campus or building map, depending what you chose.
The "BuildingMap" component needs to load a specific blueprint according to what building you selected. It gets the props.building with the name of the building but I don't know how to load a component using that variable.
I have tried import, fetch and require but nothing seems to work.
Please help.
My code looks something like this:
//Content Component
<BuildingMap building={selectedBuilding} campus={selectedCampus} />
//BuildingMap Component
import *MyBlueprint* from (specific folder depending on the campus selected)
class BuildingMap extends React.Component {
render(){
return (
<div className="blueprint" id={this.props.building}>
{*MyBlueprint*}
</div>
)
}
}
Unfortunately, you cannot import/require components dynamically in React environment.
Depending on how many buildings/blueprints there are, it's possible to import them one by one, create component-building map and pick component by building ID.
If there are many/infinite components to load, I would surely pick another method - don't know content of your problem.
import BlueprintA from './BlueprintA'
import BlueprintB from './BlueprintB'
import BlueprintC from './BlueprintC'
// ...
class BuildingMap extends React.Component {
render(){
const C = {
buildingA: BlueprintA,
buildingB: BlueprintB,
buildingC: BlueprintC,
// ...
}[this.props.building]
return (
<div className="blueprint" id={this.props.building}>
<C />
</div>
)
}
}
This question is pretty old but as I was looking for how to solve the same problem let me give my answer. It can be done with dynamic import React.lazy:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
See more details here: https://reactjs.org/docs/code-splitting.html#reactlazy
To add to #Andreyco's answer:
Using a lookup table of string IDs/names to component classes is a typical React idiom. One common use case is a modal manager component that can render multiple different types of modals. For some examples, see Dan Abramov's answer at "How can I render a modal dialog in Redux?" (not Redux-specific), as well as some of the related articles in the React Component Patterns#Modal Dialogs and Redux Techniques#UI sections of my React/Redux links list.
Per #azium's comment: it is definitely possible to use dynamic importing (via require.ensure() or the new import() function) to load chunks at runtime, and you could add the exports from those dynamically imported chunks into a lookup table when they are loaded.