Before diving to the main problem, my use case is I am trying to handle the scroll to a desired section. I will have navigations on the left and list of form sections relative to those navigation on the right. The Navigation and Form Section are the child component. Here is how I have structured my code
Parent.js
const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop);
const Profile = () => {
const socialRef = React.useRef(null);
const smsRef = React.useRef(null);
const handleScroll = ref => {
console.log("scrollRef", ref);
scrollToRef(ref);
};
return (
<>
<Wrapper>
<Grid>
<Row>
<Col xs={12} md={3} sm={12}>
<Navigation
socialRef={socialRef}
smsRef={smsRef}
handleScroll={handleScroll}
/>
</Col>
<Col xs={12} md={9} sm={12}>
<Form
socialRef={socialRef}
smsRef={smsRef}
/>
</Col>
</Row>
</Grid>
</Wrapper>
</>
);
};
Navigation.js(child component)
I tried using forwardRef but seems like it only accepts one argument as ref though I have multiple refs.
const Navigation = React.forwardRef(({ handleScroll }, ref) => {
// it only accepts on ref argument
const items = [
{ id: 1, name: "Social connections", pointer: "social-connections", to: ref }, // socialRef
{ id: 2, name: "SMS preference", pointer: "sms", to: ref }, // smsRef
];
return (
<>
<Box>
<UL>
{items.map(item => {
return (
<LI
key={item.id}
active={item.active}
onClick={() => handleScroll(item.to)}
>
{item.name}
</LI>
);
})}
</UL>
</Box>
</>
);
});
export default Navigation;
Form.js
I do not have idea on passing multiple refs when using forwardRef so for form section I have passed the refs as simple props passing.
const Form = ({ socialRef, smsRef }) => {
return (
<>
<Formik initialValues={initialValues()}>
{({ handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<Social socialRef={socialRef} />
<SMS smsRef={smsRef} />
</form>
);
}}
</Formik>
</>
);
};
Social.js
const Social = ({ socialRef }) => {
return (
<>
<Row ref={socialRef}>
<Col xs={12} md={3}>
<Label>Social connections</Label>
</Col>
<Col xs={12} md={6}></Col>
</Row>
</>
);
};
Can anyone help me at passing multiple refs so when clicked on the particular navigation item, it should scroll me to its respective component(section).
I have added an example below. I have not tested this. This is just the idea.
import React, { createContext, useState, useContext, useRef, useEffect } from 'react'
export const RefContext = createContext({});
export const RefContextProvider = ({ children }) => {
const [refs, setRefs] = useState({});
return <RefContext.Provider value={{ refs, setRefs }}>
{children}
</RefContext.Provider>;
};
const Profile = ({ children }) => {
// ---------------- Here you can access refs set in the Navigation
const { refs } = useContext(RefContext);
console.log(refs.socialRef, refs.smsRef);
return <>
{children}
</>;
};
const Navigation = () => {
const socialRef = useRef(null);
const smsRef = useRef(null);
const { setRefs } = useContext(RefContext);
// --------------- Here you add the refs to context
useEffect(() => {
if (socialRef && smsRef) {
setRefs({ socialRef, smsRef });
}
}, [socialRef, smsRef, setRefs]);
return <>
<div ref={socialRef}></div>
<div ref={smsRef}></div>
</>
};
export const Example = () => {
return (
<RefContextProvider>
<Profile>
<Navigation />
</Profile>
</RefContextProvider>
);
};
Related
i need to ask some question
I have 1 parent(index.js) and 2 childs (JobRequirement.js and JobList.js)
how can i send a data from job requirement to joblist?
here is my code
// JOBREQUIREMENT.JS
const JobRequirement = ({ isOpen, handleSelect }) => {
const [datas, setDatas] = useState([])
const loadData = () => {
axios.get('/bla')
.then((res) => {
setDatas(res.data.data)
})
}
useEffect(() => {
loadData()
}, [])
if (isOpen) {
return (
<Fragment>
<h5 className='mt-3 mb-2'>Job Requirements</h5>
<Row>
{datas.map((data) => (
<Col md='6' lg='4' key={data.id}>
<Card onClick={() => handleSelect(data.id)} className='text-center vertical-align-center mb-3'>
<CardBody>
<CardBody tag='h4'>{data.name}</CardBody>
</CardBody>
</Card>
</Col>
))}
</Row>
</Fragment>
)
} else return (<></>)
}
export default JobRequirement
// INDEX.JS
import { Fragment, useState } from 'react'
import JobRequirement from './JobRequirement'
import JobList from './JobList'
export default function JobRequirements() {
const [jobRequirement, setJobRequirement] = useState(true)
const [jobList, setJobList] = useState(false)
const selectJobRequirement = (data) => {
setJobRequirement(false)
setJobList(true, data)
}
const closeJobList = () => {
setJobRequirement(true)
setJobList(false)
}
return (
<div>
<Fragment>
<JobRequirement isOpen={jobRequirement} handleSelect={selectJobRequirement} />
<JobList isOpen={jobList} close={closeJobList} />
</Fragment>
</div>
)
}
// JOBLIST.JS
import { Fragment } from 'react'
import { Button, Row, Col, Card, CardBody } from 'reactstrap'
import { ChevronLeft } from 'react-feather'
const JobList = ({ isOpen, close, data }) => {
console.log(data)
if (isOpen) {
return (
<Fragment>
<div className='mt-2 mb-2'>
<Button size="sm" className='btn-icon' onClick={() => close()}><ChevronLeft size='15'/></Button> List of Job
</div>
<div>
<Row>
<Col md='6' lg='4'>
<Card className='text-center vertical-align-center mb-3'>
<CardBody>
<CardBody tag='h4'>Hello</CardBody>
</CardBody>
</Card>
</Col>
</Row>
</div>
</Fragment>
)
} else return (<></>)
}
export default JobList
I need to get a {data.id} from jobrequirement.js and use it in joblist.js
thankyou so much
So I have a functional components here:
export default function Test() {
const [products, setProduct] = useState<any>([]);
const [image, setImage] = useState<any>([""]);
const [prices, setPrice] = useState<any>([]);
const [showPrice, setShowPrice] = useState<boolean>(false);
const [PhonePrice, setPhonePrice] = useState<any>("");
useEffect(() => {
async function loadProducts() {
const res = await fetch("http://raw.githubusercontent.com/reborn094/Practice/main/data.json", {
method: "GET",
});
const json = await res.json();
const data = json.products;
setProduct(data);
return (
<div>
{products.map((product: any, index: number) => {
return (
<Col>
<Card key={index} style={{ width: "20rem" }}>
<Card.Body>
<Card.Title>
</Card.Title>
<Card.Title>
<Child ProductImage={image[index]} name={product.name} code={product.code} onSelectProduct={()=>{
>
what should I write here????
------------------------
}}
></Child>
</Card.Title>
<Card.Text></Card.Text>
</Card.Body>
</Card>
</Col>
);
})}
</div>
);
}
And here is my Child components :
export default function Child(props:{
onSelectProduct?:()=> void;
}) {
return (
<div>
<Button onClick={props.onSelectProduct}></Button>
</div>
)
}
My question is What if I want to set button in Test components to target single item in list, what should I do? Because Now If I set Button that Button would trigger all item.What should I do in the function onSelectProduct?
I was trying to render multiple props in a single component both the props are from different apis which are working together and the problem is i want to map the props in a single component to display a list of posts. someone said me do this by creating a variable (array) in my component. Then, spreading the properties (props) into the variable e.g myVariable.push(...posts, ...externalPosts). But i can't seem to figure out how do i achieve the results the Component renders another child component called to which i want to pass on the props.
App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';
const App = () => {
const [ posts, setPosts ] = useState([]);
const [ postsExternal, setPostsExternal ] = useState([]);
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`).then(({ data }) => {
let externalPosts = [];
setPosts(data);
console.log(data);
data.map(({ external_id }) => {
axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
console.log(data);
externalPosts.push(data);
});
setPostsExternal(externalPosts);
});
});
}
useEffect(() => {
fetchPostsAll();
}, []);
return (
<div>
<Navbar/>
<Posts posts={posts} postsExternal={postsExternal} />
</div>
);
};
export default App;
Posts.js
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Post.js
import React from 'react';
const Post = ({ post, postExternal }) => {
return (
<Figure>
<span>{post.title}</span>
<span>{postExternal.rating}</span>
</Figure>
)
}
export default Post;
The problem is with the Posts.js file while mapping i want to map both the props and pass those single item props to Post.js
Do:
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post, index) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal[index]}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Edited:
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{posts.length !== 0 && postsExternal.length !== 0 && posts.map((post, index) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal[index]}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Make sure your data is loaded.
fetchPostsAll function:
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`)
.then(({ data }) => {
console.log(data);
const externalPosts = data.map(({ external_id }) => {
return axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
return data;
});
})
Promise
.all(externalPosts)
.then(externalPosts => {
setPosts(data);
setExternalPosts(externalPosts);
});
})
;
}
You just don't desctructure the props and pass it as is.
import React from 'react';
import Post from './Post/Post';
const Posts = (props) => {
const { posts } = props;
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post {...props} post={post}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
And you can do this in your App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';
const App = () => {
const [ posts, setPosts ] = useState([]);
const [ postsExternal, setPostsExternal ] = useState([]);
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`).then(({ data }) => {
let externalPosts = [];
setPosts(data);
console.log(data);
data.map(({ external_id }) => {
axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
console.log(data);
externalPosts.push(data);
});
setPostsExternal(externalPosts);
});
});
}
useEffect(() => {
fetchPostsAll();
}, []);
const props = { posts, postsExternal };
return (
<div>
<Navbar/>
<Posts {...props} />
</div>
);
};
export default App;
I am writing an ecommerce webshop using React js and Commerce.js
I am very confused as I am not able to identify the precise problem. But here's how it's happening:
My App.js:
const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState([]);
const fetchProducts = async () => {
const { data } = await commerce.products.list();
setProducts(data);
};
const fetchCart = async () => {
setCart(await commerce.cart.retrieve());
};
const handleAddToCart = async (productId, quantity) => {
const item = await commerce.cart.add(productId, quantity);
setCart(item.cart);
};
useEffect(() => {
fetchProducts();
fetchCart();
}, []);
console.log(cart);
return (
<>
<Navbar totalItems={cart.total_items} />
{/* <Products products={products} onAddToCart={handleAddToCart} /> */}
{/* <Cart cartItems={cart} /> */}
</>
);
Now when I uncomment the <Cart cartItems={cart} />, React js Throws an error
This is the error in from the console
Uncaught Error: Objects are not valid as a React child (found: object with keys {raw, formatted, formatted_with_symbol, formatted_with_code}). If you meant to render a collection of children, use an array instead.
Interestingly enough, the single item is being passed on through the Cart.js but not without the error.
Here's Cart.js for Reference
const Cart = ({ cartItems }) => {
const classes = useStyles();
const EmptyCart = () => {
return (
<Typography variant="subtitle1">
You have no items in your cart. Start adding some :)
</Typography>
);
};
const FilledCart = () => {
return (
<>
<Grid container spacing={3}>
{cartItems.line_items.map((item) => (
<Grid item xs={12} sm={4} key={item.id}>
<CartItem items={item} />
</Grid>
))}
</Grid>
<div className={classes.cardDetails}>
<Typography variant="h4">
Subtotal: {cartItems.subtotal.formatted_with_symbol}
</Typography>
<div>
<Button
className={classes.emptyButton}
size="large"
type="button"
variant="contained"
color="secondary"
>
Empty Cart
</Button>
<Button
className={classes.checkoutButton}
size="large"
type="button"
variant="contained"
color="primary"
>
Checkout
</Button>
</div>
</div>
</>
);
};
if (!cartItems.line_items)
return <Typography variant="h4">Loading...</Typography>;
return (
<Container>
<div className={classes.toolbar} />
<Typography className={classes.title} variant="h3">
Your Shopping Cart
</Typography>
{!cartItems.line_items.length ? <EmptyCart /> : <FilledCart />}
</Container>
);
};
Update:
Here's what Cart object looks like
I'm using useReducer and useContext as a flux store and i'm boggled on why i'm unable to update the stores state. Here is a sample of the code I'm working with.
reducer and initial state
export const localState = {
modal_open: false,
date: null
}
export const reducer = (state , action) => {
switch (action.type) {
case "OPEN_MODAL":
return {
...state,
modal_open: true
}
case "CLOSE_MODAL":
return {
...state,
modal_open: false
}
case "SET_DATE":
return {
...state,
date: action.payload
}
default:
return state;
}
};
context constructor and component wrapping
import React from "react";
const LocalWebSiteContext= React.createContext();
const WebsiteDetails = () => {
const [state, dispatch] = React.useReducer(reducer, localState)
const [averPositions, setAverPositions] = React.useState()
const classes = useStyles();
let match = useRouteMatch("/app/websites/:id/:slug");
let { id } = useParams();
const context = useContext(UserContext);
const history = useHistory();
//testing
const { localContext } = context
const websiteData = localContext.websites.find((el, idx) => {
if(el.website_id === id){
return el;
}
});
const userAndWebsiteData = {
...websiteData,
...localContext.user
}
if(!userAndWebsiteData){
console.log('Not a valid website');
history.push('/app/websites/');
// return;
}
return (
<>
<localWebSiteContext.Provider value={{state, dispatch}}>
{ userAndWebsiteData &&
<Page className={classes.root} title="Analytics Dashboard">
{/* { JSON.stringify(userAndWebsiteData) }
{ id } */}
<Header websiteData={userAndWebsiteData} />
<Grid className={classes.container} container spacing={3}>
<Grid item xs={12}>
<Overview websiteData={userAndWebsiteData} />
</Grid>
<Grid item lg={8} xl={9} xs={12}>
<CustomModal />
<FinancialStats websiteData={userAndWebsiteData}/>
</Grid>
<Grid item lg={4} xl={3} xs={12}>
{/* {
JSON.stringify(userAndWebsiteData.positionRangesData)}
*/}
<Top5To30 positionData={userAndWebsiteData.positionRangesData
? userAndWebsiteData.positionRangesData : {} } />
range bar chart
<EarningsSegmentation />
</Grid>
<Grid item lg={12} xs={12}>
<KeywordsList />
</Grid>
<Grid item lg={4} xs={12}>
<CustomerActivity />
</Grid>
</Grid>
</Page>
}
</localWebSiteContext.Provider>
</>
);
};
Component where i'm dispatching the payload to change date
const FinancialStats = props => {
const {state, dispatch} = React.useContext(localWebSiteContext)
const { websiteData, className, handleAverData, ...rest } = props;
const [dateId, setDateId] = React.useState(null)
const [disabled, setDisabled] = useState([]);
const handleModalOpen = () => {
const averPositions = websiteData.dailyAveragePositions;
if (averPositions){
const dateNum = parseInt(averPositions[0].d)
dispatch({type: 'OPEN_MODAL', payload: dateNum})
}
}
return (
<span
key={dataKey}
className="legend-item"
style={style}
>
<Surface width={10} height={10}>
<Symbols cx={5} cy={5} type="circle" size={50} fill={color} />
{active && (
<Symbols
cx={5}
cy={5}
type="circle"
size={25}
fill={'#FFF'}
/>
)}
</Surface>
<span>{dataKey}</span>
</span>
);
})}
</div>
);
};
The expected behavior is when I dispatch({type: 'SET_DATE', payload: dateNum) it will reflect that all other components subscribed to the useContext hook. But i cannot for the life of me get it to update from null... I'm able to switch the bool values. Even when I tried to set it locally in a useState hook it's still null? Maybe has something to do with renders? Thanks in advance!!