Develop Reference

How to pass child prop to parent?

I've got some dynamic buttons that are a child component, and get assigned a value="URL" based off of my MongoDB. How do I go about passing that generated value to my parent/web component src={currentSrc}? When I assign it, it says that currentSrc is not defined?
Here's the SizeOptions:
import { useState } from "react";
export const SizeOptions = ({ size }) => {
const sizeName = Object.keys(size);
// Update Model Viewers Src
function changeSize (){
setSrc(currentSrc)
console.log(currentSrc)
}
if (!sizeName) return <></>;
return (
<div>
{size[sizeName].map((item) => (
<button key={item} className='size' value={item} onClick={changeSize} currentSrc={item}>
{sizeName}
</button>
))}
</div>
);
};
And here is the ProductScreen:
import './ProductScreen.css';
import { useEffect, useState } from "react";
//Components
import { SizeOptions } from '../components/SizeOptions';
const [currentSrc, setSrc] = useState(size[sizeName][0])
const ProductScreen = ({match}) => {
return(
<div className='sizebuttons'>
{product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} setSrc={currentSrc} changeSize={changeSize}/>))}
</div>
<div className="productscreen__right">
<model-viewer
id="model-viewer"
src={currentSrc}
alt={product.productName}
ar
ar-modes="scene-viewer quick-look"
ar-placement="floor"
shadow-intensity="1"
camera-controls
min-camera-orbit={product.mincameraorbit}
max-camera-orbit={product.maxcameraorbit}
interaction-prompt="none">
<button slot="ar-button" className="ar-button">
View in your space
</button>
</model-viewer>
</div>
)}
The rendered button:
I have more code inside my ProductScreen, I just tried to keep it as minimized as possible to try and make it easier to help me figure it out! Any help would be greatly appreciated!

Good news! I finally figured it out after many, many attempts.
So in order to pass from child to parent this is what I came up with:
SizeOptions.js
export const SizeOptions = ({ size, changeSrc }) => {
const sizeName = Object.keys(size);
if (!sizeName) return <></>;
return (
<div>
{size[sizeName].map((url) => (
<button key={url} className='size' value={url} onClick={() => changeSrc(url)}>
{sizeName}
</button>
))}
</div>
);
};
export default SizeOptions;
ProductScreen.js
import './ProductScreen.css';
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
// Actions
import { getProductDetails } from "../redux/actions/productActions";
//Components
import { SizeOptions } from '../components/SizeOptions';
const ProductScreen = ({match}) => {
const dispatch = useDispatch();
const productDetails = useSelector(state => state.getProductDetails);
const { loading, error, product } = productDetails;
const [ src, setSrc ] = useState("Default URL")
return(
<div className='sizebuttons'>
{product && (product.size || []).map((size, index) => (<SizeOptions key={index} size= {size} changeSrc={src => setSrc(src)}/>))}
</div>
<model-viewer
id="model-viewer"
src={src}
alt={product.productName}
ar
ar-modes="scene-viewer quick-look"
ar-placement="floor"
shadow-intensity="1"
camera-controls
min-camera-orbit={product.mincameraorbit}
max-camera-orbit={product.maxcameraorbit}
interaction-prompt="none">
<button slot="ar-button" className="ar-button">
View in your space
</button>
</model-viewer>
)};
The only issue now is how to make the "Default URL" actually be a URL as right now if I put {src} there, it says it cannot do that before the component is rendered.

Drag drop in React.js

I'm trying to make a drag-drop functionality on a webpage but unsuccessful so far. I want to make the A, B, C cards in the pink box stay where they are after we drag a copy of them to the black box (like a menu box, link for a demo of this behavior). I don't know what element or code that makes the box stay where they are like a menu bar despite many attempts of finding, so any help would be appreciated! Thank you!
So far, since I'm a beginner in React, my problem is that the online examples I refer to are written in a single file using 'class App', but what I'm trying to do is to have separate components, and I don't know how to convert the code properly.
My app includes index.js, App.js, and the components:\
Card.js
import React from "react";
function Card(props) {
const dragStart = (e) => {
const target = e.target;
e.dataTransfer.dropEffect = "move";
e.dataTransfer.setData("card_id", target.id);
setTimeout(() => {
target.style.display = "none";
}, 0);
};
const dragOver = (e) => {
e.stopPropagation();
// e.dataTransfer.dropEffect = "copy";
};
return (
<div
id={props.id}
className={props.className}
draggable={props.draggable}
onDragStart={dragStart}
onDragOver={dragOver}
>
{props.children}
</div>
);
}
export default Card;
Board.js (the black box)
import React from "react";
function Board(props) {
const drop = (e) => {
e.preventDefault();
const card_id = e.dataTransfer.getData("card_id");
const card = document.getElementById(card_id);
card.style.display = "block";
e.target.appendChild(card);
};
const dragOver = (e) => {
e.preventDefault();
};
return (
<div
id={props.id}
className={props.className}
onDrop={drop}
onDragOver={dragOver}
>
{props.children}
</div>
);
}
export default Board;
Menu.js (the pink box)
import React from "react";
import Card from "./Card";
function Menu(props) {
const dragOver = (e) => {
e.preventDefault();
};
return (
<div id={props.id} className={props.className} onDragOver={dragOver}>
{props.children}
</div>
);
}
export default Menu;
My App.js is currently like this:
import React, { useState } from "react";
import Board from "./components/Board";
import Card from "./components/Card";
import Menu from "./components/Menu";
function App() {
const [card_list, setList] = useState([
{ id: "card-1", value: "A" },
{ id: "card-2", value: "B" },
{ id: "card-3", value: "C" },
]);
return (
<div className="flexbox">
<Menu id="menu-1" className="menu">
{card_list.map((item) => {
return (
<Card
key={item.id}
value={item.value}
id={item.id}
className="card"
draggable="true"
>
<p> {item.value}</p>
</Card>
);
})}
</Menu>
<Board id="board-2" className="board">
<Card id="card-other" className="card">
<p> Card two </p>
</Card>
</Board>
</div>
);
}
export default App;
And index.js is nothing but:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

You can implement dragging and dropping using react-grid-layout easily.
Here is react-grid-layout example.
https://codesandbox.io/examples/package/react-grid-layout
In addition to it, you can use react-dnd module for dragging and dropping.

React states button or create back button?

I'm not a developer and I'm currently blocked. I'm trying to create a "go home" button or hide this restart button and show it to the user only when he reaches the last view. I can't find a solution...
Thanks in advance for your help.
import React, { useState } from 'react';
import './App.css';
import { SelectSign } from './components/SelectSign';
import { SelectTimeframe } from './components/SelectTimeframe';
import { Horoscope } from './components/Horoscope';
function App() {
const [selectedSign, setSelectedSign] = useState(null);
const [
selectedTimeframe,
setSelectedTimeframe,
] = useState('today');
const restart = () => {
setSelectedSign(null);
setSelectedTimeframe('today');
};
return (
<div className="App">
<h1>The Horoscope App</h1>
{!selectedSign && (
<SelectSign onSignSelected={setSelectedSign} />
)}
{selectedSign && !selectedTimeframe && (
<SelectTimeframe
onTimeframeSelected={setSelectedTimeframe}
/>
)}
{selectedSign && selectedTimeframe && (
<Horoscope
sign={selectedSign}
timeframe={selectedTimeframe}
/>
)}
<button onClick={restart}>Restart</button>
</div>
);
}
export default App;

When selectSign button is clicked you are setting the value in the selectedSign.
You can check if else condition here using ternary operator in the JSX template.
If selectedSign value is present then show GO home button else it will show Restart button.
function App() {
const [selectedSign, setSelectedSign] = useState(null);
const [
selectedTimeframe,
setSelectedTimeframe,
] = useState('today');
const restart = () => {
setSelectedSign(null);
setSelectedTimeframe('today');
};
return (
<div className="App">
<h1>The Horoscope App</h1>
{!selectedSign && (
<SelectSign onSignSelected={setSelectedSign} />
)}
{selectedSign && !selectedTimeframe && (
<SelectTimeframe
onTimeframeSelected={setSelectedTimeframe}
/>
)}
{selectedSign && selectedTimeframe && (
<Horoscope
sign={selectedSign}
timeframe={selectedTimeframe}
/>
)}
{
selectedSign?<button>Go Home</button>:<button onClick={restart}>Restart</button>
}
</div>
);
}
export default App;

How to render multiple components with different component name?

I have a few components, they have the same parameter with iterative values, like this:
import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";
export default function App() {
return (
<div className="App">
<Panel id={1} />
<Navbar id={2} />
</div>
);
}
const Panel = ({ id }) => {
return (
<div>The id is {id}</div>
);
};
const Navbar = ({ id }) => {
return (
<div>The id is {id}</div>
);
};
Working example here: https://codesandbox.io/s/staging-pond-mpnnp
Now I'd like to use map to render those components at once in App.js, something like this:
export default function App() {
const compnentArray = ['Panel', 'Navbar'];
const RenderComponents = () => {
let _o = [];
return (
componentArray.map((item, index) => _o.push(<{item} id={index} />))
)
}
return (
<div className="App">
{RenderComponents()}
</div>
);
}
So that item renders component names. Is this possible?

Sure, you could make use of Array.map()'s second parameter which gives you the index in the array:
import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";
const components = [Panel, Navbar];
export default function App() {
return (
<div className="App">
{components.map((Component, i) => (
<Component key={i} id={i + 1} />
))}
</div>
);
}
As mentioned in React's documentation, to render a component dynamically, just make sure you assign it to a variable with a capital first letter and use it like you'd use any other component.

You could swap strings with your actual component references and itererate over them directly in your JSX part, like this :
export default function App() {
const componentsArray = [Panel, Navbar];
return (
<div className="App">
{componentsArray.map((Component, index) => <Component key={index} id={index + 1} />)}
</div>
);
}
Though I would suggest to memoize them to improve performance once you're confortable enough with React to start using memoization.

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";
const components = [Panel, Navbar]; // notice you are using the components as items, not strings;
/*
if the components need props from the parent,
the `renderComponents()` function should be declared
inside the parent component (and possibly with a `useCallback()`
hook, to avoid unnecessary re-declarations on re-renders)
*/
function renderComponents() {
return components.map((comp, index) => <comp key={index} id={index} />) || null;
}
export default function App() {
return (
<div className="App">
{renderComponents()}
</div>
);
}

React #reach/Router issues How to make the switchcase work

I am trying to make my App.js route to my People.jsx etc.. but it is not working correctly. I hope I could fix the issue from there if I could make this work. I have been trying to do this for about 2 hours with the 20 min rule but this one I need help with. I have tried other variations but my goal is to get the,theID over to Person as well. I am thinking about using {useContext } to do that but I can't even get it to route. I wish I knew what I was doing wrong so I could correct it but other people are using different types of routers and I was confused with them even more.
I updated it with links still a no go for me any other suggestions?
App.js
import './App.css';
import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import People from './components/People'
import Planet from './components/Planets'
import Starship from './components/Starships'
import { Router, Link } from '#reach/router';
function App() {
const [starwarsState, setStarwarsState] = useState('')
const [theID, setTheID] = useState('')
const selectedState = (e) => {
setStarwarsState(e.target.value)
}
const switchItem = () => {
switch (starwarsState) {
case 'people':
<Link path='/people/' />;
break;
case 'planets':
<Link path="/planets/" />;
break;
case 'starships':
<Link path='/starships/' />;
break;
default:
return null;
}
}
const addId = e => {
setTheID(e.target.value)
console.log(theID)
}
return (
<div className='App'>
<header className='App-header' >
Search For:
<select onChange={selectedState} className='form-control-lg bg-dark text-white'>
<option value='people' active >People</option>
<option value='planets' >Planets</option>
<option value='starships' >Starships</option>
</select>
ID:
<input type='text' onChange={addId} className='form-control-lg col-sm-1 bg-dark text-white' />
<button className='btn-lg btn-warning' onClick={switchItem} >Search Item</button>
<Router>
<People path='/people/' />
<Planet path="/planets/" />
<Starship path='/starships/' />
</Router>
</header>
{starwarsState}
</div>
)
}
export default App;
People.jsx
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Link } from '#reach/router';
const People = props => {
const [peopleData, setpeopleData] = useState([]);
useEffect(() => {
axios.get(`https://swapi.dev/api/people/${props.theID}`)
.then(response => { setpeopleData(response.data) })
console.log(peopleData)
}, []);
return (
<div>
<span> the People have spoken</span>
<Link to='/people' />
</div>
)
}
export default People;

Issues
You aren't actually rendering the routes/links from switchItem since onClick callbacks can't return renderable UI directly to the render method.
Solution
Unconditionally render your routes all at the same time within a single Router and imperatively navigate to them in the switchItem handler.
App
...
import { Router, navigate } from "#reach/router";
...
function App() {
const [starwarsState, setStarwarsState] = useState("");
const [theID, setTheID] = useState("");
...
const switchItem = () => {
switch (starwarsState) {
case "people":
navigate("/people"); // <-- imperative navigation
break;
case "planets":
navigate("/planets");
break;
case "starships":
navigate("/starships");
break;
default:
return null;
}
};
return (
<div className="App">
<header className="App-header">
Search For:
<select
onChange={selectedState}
value={starwarsState}
className="form-control-lg bg-dark text-white"
>
<option disabled value="">
Choose Path
</option>
<option value="people">
People
</option>
<option value="planets">Planets</option>
<option value="starships">Starships</option>
</select>
ID:
<input
type="text"
onChange={addId}
className="form-control-lg col-sm-1 bg-dark text-white"
/>
<button className="btn-lg btn-warning" onClick={switchItem}>
Search Item
</button>
</header>
<Router>
<People path="/people" theID={theID} /> // <-- pass `theID` state as prop
<Planet path="/planets" />
<Starship path='/starships' />
</Router>
</div>
);
}
People
const People = ({ theID }) => {
const [peopleData, setpeopleData] = useState([]);
useEffect(() => {
axios.get(`https://swapi.dev/api/people/${theID}`)
.then(response => { setpeopleData(response.data) });
}, [theID]);
return (
<div>
<div>The ID: {theID}</div>
<span>the People have spoken</span>
</div>
);
};

Use Imperative Routing (not switch statement) with Event Handlers
Your code is using a switch statement in combination with the switchItem() function. This is not how to redirect the user imperatively (meaning, through something other than a link clicked directly by the user).
To imperatively route your users, use the navigate method.
Via Reach Router docs (link):
Sometimes you need to navigate in response to something other than the user clicking on a link. For this we have navigate. Let’s import navigate.
import {
Router,
Link,
navigate
} from "#reach/router"
In your case, the entire switch statement can be rewritten as follows:
useEffect(() => navigate(`/${starwarsState}`), [starwarsState])
useEffect will watch for changes to the starwarsState, which is either going to be 'people', 'planets', or 'starships'. Once a change occurs, it will navigate the user to the corresponding path.
Solution: Routing Only
The following solution doesn't implement axios, it focuses solely on the client-side routing logic.
I found some other issues with your code when I was working through a solution. Here is a version that I wrote that implements parameter-level routing while also making some other cleanup (refactoring the swapi categories into a config object, etc).
App.js
import React, { useState, useEffect } from 'react'
import { useWhatChanged } from "#simbathesailor/use-what-changed";
import { Router, Link, navigate } from "#reach/router";
import 'bootstrap/dist/css/bootstrap.min.css';
import { People, Person } from './components/People'
import { Planets, Planet } from './components/Planets'
import { Starships, Starship } from './components/Starships'
import './App.css';
function App() {
// destructure categories from config
const { people, planets, starships } = config.categories
// initialize state
const [starwarsState, setStarwarsState] = useState(people);
const [theID, setTheID] = useState('');
// log updates to ID and starwarsState
useWhatChanged([starwarsState, theID], 'starwarsState, theID')
// change state on input from user
const addId = e => setTheID(e.target.value)
const selectCategory = (e) => setStarwarsState(e.target.value)
// route the user based on starwarsState
useEffect(() => navigate(`/${starwarsState}`), [starwarsState])
// search swapi based on category and id
const searchSwapi = e => {
e.preventDefault()
navigate(`/${starwarsState}/${theID}`)
}
return (
<div className="App">
<header className='App-header' >
Search For:
<form onSubmit={searchSwapi}>
<select onChange={selectCategory} className='form-control-lg bg-dark text-white'>
<option value={people} >People</option>
<option value={planets} >Planets</option>
<option value={starships} >Starships</option>
</select>
ID:
<input type='text' onChange={addId} className='form-control-lg col-sm-1 bg-dark text-white' />
<button className='btn-lg btn-warning' >Search Item</button>
</form>
</header>
<Router>
<People path='/people/'>
<Person path=':personId' />
</People>
<Planets path="/planets/">
<Planet path=':planetId' />
</Planets>
<Starships path='/starships/'>
<Starship path=':starshipId' />
</Starships>
</Router>
</div>
)
}
const config = {
categories: {
people: 'people',
planets: 'planets',
starships: 'starships'
}
}
export default App;
Planets.js
import React from 'react'
export const Planets = props => {
return (
<div>
<span> the Planets have spoken</span>
{props.children}
</div>
)
}
export const Planet = props => {
return (
<div>
Planet Data
</div>
)
}
People.js
import React, { useState, useEffect } from 'react'
export const People = props => {
return (
<div>
<span> the People have spoken</span>
{props.children}
</div>
)
}
export const Person = props => {
return (
<div>
Person Data
</div>
)
}
Starships.js
import React from 'react'
export const Starships = props => {
return (
<div>
<span> the Starships have spoken</span>
{props.children}
</div>
)
}
export const Starship = props => {
return (
<div>
Starship Data
</div>
)
}
[UPDATE] Solution: Routing with API Calls
The following solution takes the code from above and refactors it using the state management pattern proposed by Leigh Halliday. The solution adds three things:
useContext for managing global state
React.memo() for memoizing AppContent component
react-query for managing remote API calls to SWAPI.
View code on GitHub
App.js
// App.js
import React, {
useState,
useEffect,
createContext,
useContext,
memo
} from 'react'
import { ReactQueryDevtools } from "react-query-devtools";
import { useWhatChanged } from "#simbathesailor/use-what-changed";
import { Router, navigate } from "#reach/router";
import 'bootstrap/dist/css/bootstrap.min.css';
import { People, Person } from './components/People'
import { Planets, Planet } from './components/Planets'
import { Starships, Starship } from './components/Starships'
import './App.css';
import Axios from 'axios';
// APP w/ CONTEXT PROVIDER
export default function App() {
return (
<>
<StarwarsProvider>
<AppContent />
</StarwarsProvider>
<ReactQueryDevtools initialIsOpen={false} />
</>
)
}
// CREATE CONTEXT
export const StarwarsContext = createContext()
// CONTEXT PROVIDER
function StarwarsProvider({ children }) {
// import categories
const categories = config.categories
// destructure default category of search selection
const { people } = categories
// initialize state
const [category, setCategory] = useState(people);
const [theID, setTheID] = useState('');
return (
<StarwarsContext.Provider value={{
category,
setCategory,
theID,
setTheID,
categories,
fetchStarwarsData
}}>
<AppContent />
</StarwarsContext.Provider>
)
}
async function fetchStarwarsData(category, id) {
if (!id) {
return
}
const response = await Axios.get(
`https://swapi.dev/api/${category}/${id}`
).then(res => res.data)
// const data = await response.json()
const data = response
// console.log(data)
return data
}
// APP CONTENT
const AppContent = memo(() => {
// import global state into component
const { category, setCategory } = useContext(StarwarsContext)
const { theID, setTheID } = useContext(StarwarsContext)
// destructure categories
const { categories: { people, planets, starships } } = useContext(StarwarsContext)
// log updates to ID and category
useWhatChanged([category, theID], 'category, theID')
// change state on input from user
const addId = e => setTheID(e.target.value)
const selectCategory = (e) => setCategory(e.target.value)
// route the user based on category
useEffect(() => navigate(`/${category}`), [category])
// search swapi based on category and id
const searchSwapi = e => {
e.preventDefault()
navigate(`/${category}/${theID}`)
}
return (
<div className="App">
<header className='App-header' >
Search For:
<form onSubmit={searchSwapi}>
<select onChange={selectCategory} className='form-control-lg bg-dark text-white'>
<option value={people} >People</option>
<option value={planets} >Planets</option>
<option value={starships} >Starships</option>
</select>
ID:
<input type='text' onChange={addId} className='form-control-lg col-sm-1 bg-dark text-white' />
<button className='btn-lg btn-warning' >Search Item</button>
</form>
</header>
<Router>
<People path='/people/'>
<Person path=':personId' fetchStarwarsData />
</People>
<Planets path="/planets/">
<Planet path=':planetId' fetchStarwarsData />
</Planets>
<Starships path='/starships/'>
<Starship path=':starshipId' fetchStarwarsData />
</Starships>
</Router>
</div>
)
})
const config = {
categories: {
people: 'people',
planets: 'planets',
starships: 'starships'
}
}
People.js
// People.js
import React from 'react'
import { useQuery } from "react-query";
import { StarwarsContext, StarwarsProvider } from "../App"
export const People = props => {
return (
<div>
<span> the People have spoken</span>
{props.children}
</div>
)
}
export const Person = () => {
const { category, theID, fetchStarwarsData } = React.useContext(StarwarsContext)
const { data, isLoading, error } = useQuery([category, theID], fetchStarwarsData)
if (isLoading) return <div>loading...</div>
if (error) return <div>oop!! error ocurred</div>
return (
<div>
<h1>/{category}/{theID}</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
Planets.js
// Planets.js
import React from 'react'
import { useQuery } from "react-query";
import { StarwarsContext, StarwarsProvider } from "../App"
export const Planets = props => {
return (
<div>
<span> the Planets have spoken</span>
{props.children}
</div>
)
}
export const Planet = props => {
const { category, theID, fetchStarwarsData } = React.useContext(StarwarsContext)
const { data, isLoading, error } = useQuery([category, theID], fetchStarwarsData)
if (isLoading) return <div>loading...</div>
if (error) return <div>oop!! error ocurred</div>
return (
<div>
<h1>/{category}/{theID}</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
Starships.js
// Starships.js
import React from 'react'
import { useQuery } from "react-query";
import { StarwarsContext, StarwarsProvider } from "../App"
export const Starships = props => {
return (
<div>
<span> the Starships have spoken</span>
{props.children}
</div>
)
}
export const Starship = () => {
const { category, theID, fetchStarwarsData } = React.useContext(StarwarsContext)
const { data, isLoading, error } = useQuery([category, theID], fetchStarwarsData)
if (isLoading) return <div>loading...</div>
if (error) return <div>oop!! error ocurred</div>
return (
<div>
<h1>/{category}/{theID}</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}