here in the Image the src={product.image} in not pulling any images from my product.js local arrays of objects
but its working on the other pages and also works if put the direct path as src="../images/vibestick.jpg"
import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../product'
const ProductScreen = ({ match }) => {
const product = products.find( (p) => p._id === match.params.id )
return (
<>
<Link className="btn btn-light my-3" to="/home">
Go Back
</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush" >
<ListGroup.Item>
<h2>{product.name}</h2>
</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</>
)
}
export default ProductScreen
Related
<script setup lang="ts">
import * as Vue from 'vue';
import { G, ROLES } from '#/G';
import * as DTO from '#/DTO';
import { FilterMatchMode, FilterOperator } from 'primevue/api'
import { ref, onMounted } from 'vue';
import { RouterLink } from 'vue-router';
const recs = Vue.ref<DTO.IWebPages[]>();
G.doAjaxAsync<DTO.IWebPages[]>('webpages/ForUserAtClient',null).then(o => {
if (o !== null)
recs.value = o;})
const filters = Vue.ref();
const clearFilter = () => {
initFilters();};
const initFilters = () =>
{filters.value = {'global'{value:'',matchMode:FilterMatchMode.CONTAINS },}};
initFilters()
</script>
<template>
<div class="grid">
<div class="col-12 lg:col-12 xl:col-12">
<div class="card mb-0">
<h3>Data Page Menu</h3>
</div>
<br />
<DataTable
:value="recs"
:paginator="true" class="p-datatable-gridlines"
:rows="15" dataKey=""
:rowHover="true"responsiveLayout="scroll"paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:alwaysShowPaginator="false"currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
v-model:filters="filters" filterDisplay="menu" :globalFilterFields="['company']">
<template #empty>
No records
</template>
<Column field="company" header="Company" />
<Column field="dataType" header="Type" />
<Column field="screenText" header="Text" class="p-link" />
<template>
Above is my code which displays data in three columns. The last row screenText has text values for example NewAssignent. I want to make that text a router link to another page called NewAssignment. The tags and are PrimeVue tags. Wrappers over html table, row and column tags. If you see the third column I placed a class="p-link" but it makes the whole cell clickable. I want the text to be recognized as there are different pages and they should link to these values inside column cell. The other cell value is search so it will go to search page. The data coming from the API for the third column should be links to other pages.
i'm trying to create a web app with react redux and router, and i'm getting a wierd behaviour, the Router is rendering only on refresh.
that my App.js
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Router, Switch, Route, Link } from "react-router-dom";
import { ModalProvider } from './modal/modalContext';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Login from "./components/Login";
import Register from "./components/Register";
import Home from "./components/Home";
import Profile from "./components/Profile";
import BoardUser from "./components/BoardUser";
import BoardModerator from "./components/BoardModerator";
import BoardAdmin from "./components/BoardAdmin";
import DataService from "./services/data.service";
import { logout } from "./actions/auth";
import { clearMessage } from "./actions/message";
import { setDc } from "./actions/dc";
import { history } from "./helpers/history";
import simplidc_logo from "./images/dns-24px.svg"
import DetailedRackCard from './components/detailed_rack_card'
const App = () => {
const [showModeratorBoard, setShowModeratorBoard] = useState(false);
const [showAdminBoard, setShowAdminBoard] = useState(false);
const { user: currentUser } = useSelector((state) => state.auth);
const dispatch = useDispatch();
useEffect(() => {
history.listen((location) => {
dispatch(clearMessage()); // clear message when changing location
});
}, [dispatch]);
useEffect(() => {
if (currentUser) {
setShowModeratorBoard(currentUser.roles.includes("ROLE_MODERATOR"));
setShowAdminBoard(currentUser.roles.includes("ROLE_ADMIN"));
}
}, [currentUser]);
useEffect(() => {
DataService.getDevices().then(
(devicesResponse) =>{
DataService.getRacks().then(
(racksResponse) =>{
dispatch(setDc(DataService.getDc(racksResponse,devicesResponse)));
}
)
}
)
}, [dispatch]);
const logOut = () => {
dispatch(logout());
};
return (
<div>
<ModalProvider>
<Router history={history}>
<div>
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link to={"/"} className="navbar-brand">
SimpliDC
<img
alt=""
src={simplidc_logo}
width="30"
height="30"
/>
</Link>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/home"} className="nav-link">
Home
</Link>
</li>
{showModeratorBoard && (
<li className="nav-item">
<Link to={"/mod"} className="nav-link">
Moderator Board
</Link>
</li>
)}
{showAdminBoard && (
<li className="nav-item">
<Link to={"/admin"} className="nav-link">
Admin Board
</Link>
</li>
)}
{currentUser && (
<li className="nav-item">
<Link to={"/user"} className="nav-link">
User
</Link>
</li>
)}
</div>
{currentUser ? (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/profile"} className="nav-link">
{currentUser.username}
</Link>
</li>
<li className="nav-item">
<a href="/login" className="nav-link" onClick={logOut}>
LogOut
</a>
</li>
</div>
) : (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/login"} className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to={"/register"} className="nav-link">
Sign Up
</Link>
</li>
</div>
)}
</nav>
<input className="" type="text" placeholder="Type any vaule to search in the DC..."/>
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/home"]} component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
<Route path="/user" component={BoardUser} />
<Route path="/mod" component={BoardModerator} />
<Route path="/admin" component={BoardAdmin} />
<Route path="/rack/:id" component={DetailedRackCard}/>
</Switch>
</div>
</div>
</Router>
</ModalProvider>
</div>
);
};
export default App;
and i found something wierd happening while looking in the react dev tools on the Router component. this is the location in state after refresh:
and this is the same object after i click a route (login):
i'm desprate for help....
yes, that my only router in the whole app.
thanks!
The state of the <Router/> comes from the history prop which your are providing. You are not modifying that history properly. The bad mutation will be somewhere in another file. It seems like you are calling history.push() with the entire action object instead of just the action.location property.
Using the <Router/> component with a custom history prop is an advanced design pattern that you generally want to avoid unless absolutely necessary. I don't think it's necessary here, at least not for the code in this particular file.
I would recommend using a <BrowserRouter/> (or <HashRouter/>, etc. instead. If you do that, you'll need some other way to address the history.listen subscription (sidenote: you want to use a cleanup function to stop listening when the component unmounts).
You can use a useEffect hook to respond to changes in the location which you access from the useLocation hook.
const location = useLocation();
useEffect(() => {
dispatch(clearMessage()); // clear message when changing location
}, [location, dispatch]);
If you don't want to clear the message on the first render, you can add some additional checks before dispatching. You can potentially use a usePrevious custom hook or something like it. Here I am using useRef to store the previous location. The initial value for the ref is the location from useLocation, so on the first render they will be equal.
const location = useLocation();
const locRef = useRef(location);
useEffect(() => {
console.log(locRef.current, location);
// will be equal on first render
if (locRef.current !== location) {
dispatch(clearMessage());
}
locRef.current = location;
}, [location, dispatch]);
You could modify this to look at just the pathname if you want.
I would like to return an image as a widget.
I put my photo.png in a folder images next to myFile.jsx.
I have always the same error :
Can't walk dependency graph: Cannot find module './images/photo.png' form /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx required by /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx
I have also tried to: move the photo to my Desktop, use require, use import .. from ...
Here there is the code:
import { css } from "uebersicht";
// import photo from "./images/photo.jpg";
// import photo from "./Users/macbookpro/Desktop/photo.png";
export const render = () => {
return (
<div>
<img src="./images/photo.png" />
{/* <img src="./Users/macbookpro/Desktop/photo.png" /> */}
{/* <img src={require("./images/photo.png")} /> */}
{/* <img src={require("./Users/macbookpro/Desktop/photo.png")} /> */}
</div>
);
};
Since myFile.jsx is actually act as a component for uebersicht you have to include your widget folder name in you src.
For example if your photo.png is in example.widget/images folder, your should be:
<img src="example.widget/images/photo.png/>
I have created a react-bootstrap carousel with some images I load via graphql and gatsby-image-sharp (the source images are in directus).
I see the images are created in the code, but they never get assigned the "active" class. When I put the images outside of the carousel, they are shown correctly one below the other, so the retrieval seems to work fine.
If I manually add an item before and/or after the graphql images, those slides get shown correctly.
I also see that in case I put a slide before and after the graphql ones, the first "normal" slide gets shown and when the transaction is started, I get a delay corresponding to the number of generated slides before the next statically created slide is shown again.
When inspecting the site with the react development tools, I see the working slides have a transaction key of ".0" and ".2", while the non-working slides between them have transaction keys of ".1:0:0", ".1:0:1", etc...:
React devtools tree
The code I use to generate this is included below:
import React from "react"
import { Row, Col, Container, Carousel } from "react-bootstrap"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"
const IndexPage = ({ data }) => (
<Layout pageInfo={{ pageName: `index` }}>
<SEO title="Home" keywords={[`gatsby`, `react`, `bootstrap`]} />
<Container className="text-center">
<Row>
<Col>
<Carousel>
<Carousel.Item>
<div className="d-block w-100 gatsby-image-wrapper">
<h1>test</h1>
</div>
</Carousel.Item>
{data.allDirectusSlideshow.edges.map((slideShow) => {
return slideShow.node.images.map((image) => {
const sharp = data.allImageSharp.edges.find((imageSharp) => (
imageSharp.node.fluid.originalName === image.filename_disk))
return <>
<Carousel.Item key={sharp.node.id}>
<h1>Image</h1>
<Img fluid={sharp.node.fluid} className="d-block w-100" />
</Carousel.Item>
</>
})
})}
<Carousel.Item>
<h1>Test 2</h1>
</Carousel.Item>
</Carousel>
</Col>
</Row>
</Container>
</Layout>
)
export const query = graphql`
query {
allDirectusSlideshow(filter: {title: {eq: "Voorpagina"}}) {
edges {
node {
title
images {
filename_disk
}
}
}
}
allImageSharp {
edges {
node {
id
fluid {
originalName
...GatsbyImageSharpFluid
}
}
}
}
}
`
export default IndexPage
As the directus api for this site is not public, I have put up a generated code example here (note: only the homepage works)
Apparently, bootstrap carousel expects its items to be a direct child of the carousel. This means that react fragments don't work over here.
Changing this:
return <>
<Carousel.Item key={sharp.node.id}>
<h1>Image</h1>
<Img fluid={sharp.node.fluid} className="d-block w-100" />
</Carousel.Item>
</>
To this solves the issue:
return (
<Carousel.Item key={sharp.node.id}>
<h1>Image</h1>
<Img fluid={sharp.node.fluid} className="d-block w-100" />
</Carousel.Item>
)
I was trying to create a survey app using React, Redux. While trying to run the program on localhost:3000, I am getting this React.Children.only expected to receive a single React element child error. I have tried using various solutions which programmers have mentioned elsewhere but nothing has worked. The codes are as below. I must admit I am an absolute tyro as far as programming is concerned
App.js:
import React from 'react';
import {BrowserRouter,Route} from 'react-router-dom';
import Header from './Header';
const Dashboard =() => <h2>Dashboard</h2>;
const SurveyNew =() => <h2>SurveyNew</h2>;
const Landing =() => <h2>Landing</h2>;
const App = () => {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path= "/" component = {Landing} />
<Route exact path = "/surveys" component= {Dashboard} />
<Route path = "/surveys/new" component={SurveyNew} />
</div>
</BrowserRouter>
</div>
);
};
export default App;
The code of header.js file is as below:
import React, {Component} from 'react';
class Header extends Component {
render () {
return (
<div>
<nav>
<div className = "nav-wrapper">
<a className = "left brand-logo">
Emaily
</a>
<ul className="right">
<li>
<a> Login with Google </a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Header;