We Keep Coding

How to assign props values to inline styles

I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles.
I have tried a lot of solutions but none of them worked
I'm making a component named HeroSection with props including backgroundURL and videoURL, I'm then using a statement to assign backgroundImage if the prop videoURL is empty
Home.js
import React from "react";
import HeroSection from "./components/HeroSection";
function Home() {
return (
<div className="home">
<HeroSection
firstLine="Not just a team,"
secondLine="We are a "
autoType={[
"family of rebels",
"movement of ideas",
"collection of culture",
]}
backgroundURL="../assets/hero_pic.jpg"
videoURL=""
/>
</div>
);
}
export default Home;
HeroSection.jsx
import React from "react";
import Typed from "react-typed";
function HeroSection(props) {
return (
<div
className={
props.videoURL === "" ? "hero-section img-background" : "hero-section"
}
style={{
backgroundImage:
props.videoURL === "" ? `url(${this.props.backgroundURL})` : "none",
}}
>
<h2>
<span className="first-line">{props.firstLine}</span>
<br />
<span className="second-line">{props.secondLine}</span>
<Typed
strings={props.autoType}
typeSpeed={40}
loop={true}
backDelay={2000}
backSpeed={20}
/>
</h2>
</div>
);
}
export default HeroSection;
I HAVE ALSO TRIED THESE STATMENTS AND NONE OF THEM WORKED
props.videoURL === "" ? `url(${props.backgroundURL})` : "none",
props.videoURL === "" ? `url('file://${props.backgroundURL}')` : "none",

So the solution was very simple
It's due to how webpack handle your assets. Since I pass it just as a string, it can't know that it needs to bundle your png as an asset. In HeroSection I added import backgroundPic from '../assets/hero_pic.jpg' and then used it in the props backgroundURL={backgroundPic} of HeroSection
Thanks for #user3252327 for commenting the solution

In Storybook how can you display the full source of a component in the "Show code" area of a story doc

Right now in my team we are using Storybook v6 and the #storybook/addon-docs package in order to generate documentation for components.
In order to keep the .stories.mdx files small we write the story "showcase" components separately and then import them in the .stories.mdx files.
For example
// showcase/HugeComponentShowcase.jsx
import SomeComponent from 'components/SomeComponent';
export default function HugeComponentShowcase() {
return <div>
<p>This is a huge component showcase using SomeComponent</p>
<SomeComponent propA propB propC/>
<SomeComponent propB />
</div>
}
// SomeComponent.stories.mdx
import { Meta, Story, Preview, Props } from '#storybook/addon-docs';
import HugeComponentShowcase from 'showcase/HugeComponentShowcase';
<Preview >
<Story name="Generic component" >
<HugeComponentShowcase />
</Story>
</Preview>
This will result in this when you want to display the code of the showcase:
However what I want to be able to see there is:
<div>
<p>This is a huge component showcase using SomeComponent</p>
<SomeComponent propA propB propC/>
<SomeComponent propB />
</div>
or at least the whole function body of HugeComponentShowcase.
I have tried adding this to the Story component
<Preview >
<Story name="Generic component" parameters={{ docs: {source: { code: HugeComponentShowcase, } }}}>
<HugeComponentShowcase />
</Story>
</Preview>
But this ends up showing the compiled code of the component and not the original JSX code.

react-slideshow-image package not loading images from google drive

I've been trying for two days to make heads or tails of the react-slideshow-image package. I've installed all the missing dependencies by hand, I tried moving the images folder around (anything outside of src threw an error immediately though...), and I also tried uploading my images to an external google drive and substituting their links for the ones given in the example. I've disabled all other components inside the App.js.
Bottom line: the package only works if I use the image links provided in the example. No other images are ever detected.
Here is my code (copied and pasted from the example):
import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
// import images from "./images/homepage";
const fadeImages = [
"https://drive.google.com/file/d/1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ/view?usp=sharing",
"https://drive.google.com/file/d/11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP/view?usp=sharing",
"https://drive.google.com/file/d/1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN/view?usp=sharing"
// "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
// "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
];
export default function App() {
return (
<div className="slide-container">
<Fade>
<div className="each-fade">
<img src={fadeImages[0]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[1]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[2]} alt=""/>
</div>
</Fade>
</div>
);
}
Original unspalsh image links have been commented out to see if my links work, but they don't. Using images other than the ones provided seems to crash the slider entirely.
screenshot of live server view of my webstie
App.js is rendered correctly, console does not log a sinle glitch.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
// import Carousel from "./components/main/Carousel.js";
// const divStyle = {
// position: "absolute"
// }
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
What am I doing wrong?

You need to store the images ids and use a different path to get the image url https://drive.google.com/uc?id="<file-id>:
const fadeImages = [
"1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ",
"11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP",
"1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN"
];
const PATH = "https://drive.google.com/uc?id=";
then:
export default function App() {
return (
<div className="slide-container">
<Fade>
{fadeImages.map(src => (
<div className="each-fade">
<img src={`PATH${src}`} alt="" />
</div> ))
}
</Fade>
</div>
);
}

How to make a Dynamic dropdown done in React with SQL database

I'm building a react app using facebook's:
https://github.com/facebookincubator/create-react-app
I´m new to react and I havent done a dropdown menu before. I have read a lot in the web and I figure I maybe need to use the select and options tags?
I want to have 4 image buttons as I call Main menu (three of the buttons will be able to navigate directly to the picked page).
The last image button will show an undermenu with 12 options pages to go to.
Option Option Option Option
Undermenu
12 options
I´m unsure where I shall begin, right now I have done some coding before I knew I needed to connect it to the SQL database.
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import DropdownMenu from "./components/DropdownMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<DropdownMenu />
<p className="TEST"> lorem imsum </p>
</div>
);
}
}
export default App;
DropdownMenu.js component:
import React from 'react';
import main_menu_home from '../images/Buttons/main_menu_home.png';
import main_menu_dragons from '../images/Buttons/main_menu_dragons.png';
import main_menu_dragon_test from '../images/Buttons/main_menu_dragon_test.png';
import main_menu_fortune_cookie from '../images/Buttons/main_menu_fortune_cookie.png';
const DropdownMenu = props => (
<header>
<nav>
<div className="dragonMenu-container">
<div className="dragonMenu">
<ul>
<li>
<img
id="Home"
className="Main_home"
src={main_menu_home}
alt="Home_button_image"
/>
</li>
<li>
<img
id="Dragons"
className="Main_Dragons"
src={main_menu_dragons}
alt="Dragons_button_image"
/>
</li>
<li>
<img
id="Dragon_test"
className="Main_Dragon_test"
src={main_menu_dragon_test}
alt="Dragon_test_button_image"
/>
</li>
<li>
<img
id="Fortune_cookie"
className="Main_fortune_cookie"
src={main_menu_fortune_cookie}
alt="Fortune_cookie_button_image"
/>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
export default DropdownMenu;
Here the code just display four images which it gets from the images/Buttons folder. Maybe you don´t need so many imports and can get all the images with just a proper link to the image but I donno how to.
I think I need a global variable that pointing where all my images are so I can just have to invoke said variable to access the folder where the pictures are.
Ideas?
But back to the Dropdown problem:
I guess I need to create a table in my Sql?
But I donno how.
My problem is that I think of all things at the same time I need to do, but can´t easy myself to do one thing at the time.
I have more code for when I before fetched all from another table if you want to see that code as well.
Any questions, feel free to ask away :)
// Dragoness
UPDATED 18 sep 2019:
Right now, I have come this far:
I can now talk to the SQL database with react and print out some data from the SQL database itself. My problem now is that I just see broken images, does anyone have a solution for my problem?
What I see on the browser
My SQL database menus table with 4 columns
What I wrote in the browse tag to enter my data
Where I have MainMenu.js file and where I want the Buttons images from
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import DropdownMenu from "./components/DropdownMenu";
import MainMenu from "./components/MainMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<DropdownMenu />
<MainMenu />
<p className="TEST"> lorem imsum </p>
<div><img src='./images/Buttons/main_menu_home.png'/> </div>
</div>
);
}
}
export default App;
fetchMenu.php:
<?php
/* This file fetches current menus . */
include_once 'database.php';
$statement = $pdo->prepare("SELECT * FROM menus ORDER BY picUrl ASC");
$statement->execute();
$data = $statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data, JSON_PRETTY_PRINT);
?>
MainMenu.js:
import React, { Component } from 'react';
import "../App.scss";
class DropDownMenu {
id: 0;
picUrl: "";
linkUrl: "";
isSubmenu: "";
}
class MainMenu extends Component {
constructor(props) {
super(props);
this.state = {
allMenus: []
}
}
fetchAllMenus = () => {
fetch("http://localhost/dragonology/server/fetchMenu.php")
.then(response => response.json())
.then(data => {
console.log(data);
this.setState({ allMenus: data });
});
}
componentDidMount() {
this.fetchAllMenus();
}
render() {
let menu = this.state.allMenus.map((item) => {
return (<div key={item.id}><img src={item.picUrl} alt="dropdownmenu_main_and_under"/> - {item.linkUrl} - {item.isSubmenu}</div>)
});
console.log(menu);
return (
<div>{menu}</div>
);
}
}
export default MainMenu;
Thank you in advance
// Dragoness
Updated 19 sep 2019 with solution
I got some tips from those links:
I changed my images folder to be in the public instead of in src:
getting broken image in React App
Started to see a pattern that most of the tables with an image inside have some kind of "name" column, at least it worked for me:
https://www.youtube.com/watch?v=lTyks6s6b6E
All my success steps I took:
Fixed:
1. I added a folder called images inside the public folder.
2. Added one image of the main menu that I called home.
3. Went to the SQL database, deleted the old rows I tried to display the
data from that you can see on the browse tab that was inside the table
menus.
4. Added another column called picName. Took it as a varchar with 60 in
lengh.
5. Changed the settings on the picUrl to be a varchar with the lengh of
255 instead of 100 that I had before.
6. I did a test using the insert tab selection to add a row with the image
link I had before with the dot dot slash and it worked!.
7. Added 15 more rows(all main and undermenu buttons with its data).
8. After that I changed the folder structure again to have images/Buttons
and added all the button images that I had inside the src folder before.
9. Deleted all the images that were on the old folder.
10. Fixed: App.js took away the import of the DropDownMenu.js component and that it didnt print out my DropDownMenu.js component anymore.
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import MainMenu from "./components/MainMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<MainMenu />
<p className="TEST"> lorem imsum </p>
<div><img src='./images/Buttons/main_menu_home.png'/> </div>
</div>
);
}
}
export default App;
I couldn´t add the images of how my SQL database look now instead of before/where I find my images now in what folder because am new in Stack Overflow and don´t have enough reputation apperely. But those above are the steps I took to solve my problem :)

Mapping over data with dynamic images

So I have the following react component
import React from "react";
import ReactDOM from "react-dom";
/// Get out static assets
import logo1 from '../images/scaffold/logo1.svg';
import logo2 from '../images/scaffold/logo2.svg';
import logo3 from '../images/scaffold/logo3.svg';
import logo4 from '../images/scaffold/logo4.svg';
import logo5 from '../images/scaffold/logo5.svg';
import logo6 from '../images/scaffold/logo6.svg';
import logo7 from '../images/scaffold/logo7.svg';
const Links = (props) => {
return (
<div>
{Object.keys(props.link).map(i => (
<a key={i} href={props.link[i]}
target="_blank">
<div className="release-action">
<div className="release-distro-logo">
<img src={logo1}/>
</div>
<span>Action1</span>
</div>
</a>
))}
</div>
)
}
export default Links;
I would like to change the logo and the action text based on the data that comes in from props. Is it possible to use the key of the value pair in an if statement to do this? So for example, if the key was link2 then logo2 would be used and the span would change to Action2 basically the logos would visually present the link and the link URL would be used in the link src.
the links are loaded via json and pushed via props to the component
"isbn" : "3049204",
"author" : "author name",
"links": {
"link1": "https://www.google.com",
"link2": "https://www.yahoo.com",
"link3": "https://www.facebook.com",
"link4": "https://www.twitter.com",
"link5": "https://www.instagram.com",
"link6": "https://www.gmail.com"
},
"cta" : "buy now"

A solution would be to create an object containing all the available images like this:
const logos = {
link1: logo1,
link2: logo2,
// ...
};
And then in React
const Links = (props) => {
return (
<div>
{Object.keys(props.link).map(i => (
<a key={i} href={props.link[i]}
target="_blank">
<div className="release-action">
<div className="release-distro-logo">
<img src={logos[i]}/>
</div>
<span>Action1</span>
</div>
</a>
))}
</div>
)
}