latest value is coming from props, but when it is added as the initial value for state it is not showing up.
import React, { useRef, useState } from "react";
//import config from "../../../../../../config";
//import { getAuthToken } from "../../../../../utils/auth";
import styles from "./ContentRowPrice.module.css";
const ContentRowPrice = (props) => {
const [priceInput, setPriceInput] = useState(props.price);
// const priceInput = useRef();
// const handleBlur = () => {
// const price = parseFloat(priceInput.current.value);
// if (props.price === price) {
// } else {
// props.onPaywallChange(price);
// }
// };
const classes = styles["contentrowprice-input"];
return (
<>
<span>{props.price}</span>
<span>{priceInput}</span>
<input
id={`paywall_${props.price}_${props.id}`}
type="number"
min="0"
step="0.01"
// ref={priceInput}
// defaultValue={props.price}
value={priceInput}
className={classes}
// onBlur={handleBlur}
/>
</>
);
};
export default ContentRowPrice;
one Thing that I realized that the value 10 is actually coming from input that was previously in the place of the above input.
The first render of a React component is with empty values, this is the moment when react component creates component and a state with useState hook.
When you assign it in useState, it will not change in second (or later) re-renders without a useEffect hook.
useEffect(() => {
setPriceInput(props.price);
}, [props.price]);
More about this problem, you can read here:
https://medium.com/#digruby/do-not-use-props-as-default-value-of-react-usestate-directly-818ee192f454
Related
I have a state called ListItems and I wish to display them as checked if the value is present in another state array called filteredListItems. I have created a callback function but this doesn't seem to work. How do I go on about this?
import React, {useState, useRef} from 'react'
import { connect, useDispatch, useSelector, useStore} from 'react-redux';
import { setEnable} from "../actions";
import './Settings.css'
function Settings(props){
const dispatch=useDispatch();
const [listItems,setListItems]=useState(props.defaultenableVal);
const [filteredListItems,setFilteredListItems]=useState(props.defaultenableVal);
const dragItem = React.useRef();
const dragOverItem = React.useRef();
const handleSort=()=>{
let _listItems=[...listItems];
const draggedItemContent=_listItems.splice(dragItem.current,1)[0];
_listItems.splice(dragOverItem.current,0, draggedItemContent);
dragItem.current=null;
dragOverItem.current=null;
setListItems(_listItems);
}
return(
<div className='container'>
<h3>Dimensions and Metrics</h3>
{
listItems.map((item,index)=>{
return (
<div
key={index}
draggable
onDragStart={(e)=>dragItem.current=index}
onDragEnter={(e)=>dragOverItem.current=index}
onDragEnd={handleSort}
onDragOver={(e)=>e.preventDefault()} >
<input id={index} name={item} type='checkbox'
checked={(()=>{
if(filteredListItems.includes(item)){
return true
}
else{
return false
}
})} />
<label htmlFor={index} >{item}</label>
</div>
)
})
}
</div>
)
}
export default Settings;
The value of props.defaultEnableVal is ['Clicks', 'AD Requests', 'AD Responses', 'Impressions', 'Revenue', 'Fill Rate', 'CTR'].
The check does not appear on the checkbox and it doesn't seem to be accepting check input when I click on it.
Im about to setup a product Page with ionic-react and #ionic-react-router.
The products have different variants, soo I created a optional url parameter to enable smooth sharing.
My route is defined like this:
product: {
component: ProductPage,
background: '/images/dashboard-navigation-productOverview.png',
key: 'PRODUCT',
path: '/product/:id/:variantId?'
},
My ProductPage Component looks like this:
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { IonPage, IonContent } from '#ionic/react';
....
const ProductPage = ({match}) => {
const [variants, setVariants] = useState([]);
const [source, setSource] = useState(null);
const [variant, setVariant] = useState(null);
useEffect(() => {
(async () => {
const response = await productService.getProduct(parseInt(match.params.id, 10))
setSource(response);
})();
}, [match.params.id]);
useEffect(() => {
const variants = productHelpers.allVariantsFromSource(source);
if (match.params.variantId) {
const variant = productHelpers.getProductVariationById(variants, parseInt(match.params.variantId, 10));
setVariant(variant || variants[0]);
} else {
// 0 is always main detail
setVariant(variants[0]);
}
setVariants(variants);
}, [source, match.params.variantId]);
return <IonPage>
<Toolbar title={(source) ? source.name : ''}/>
<IonContent>
<Product source={source} variant={variant} variants={variants}/>
</IonContent>
</IonPage>
}
export default ProductPage;
And somewhere in product I want to change the variation with replacing the url.
So the user can use the back button, to get back where he comes from (mostly product list).
import React, {useContext} from "react";
import {IonButton, NavContext} from '#ionic/react';
const ProductVariant = ({source, newVariant}) => {
const {navigate} = useContext(NavContext);
return (
<IonButton
onClick={() => navigate(`/product/${source.id}/${newVariant.id}`, 'none', 'replace')}>{newVariant.name}</IonButton>
);
};
My Problem
The page URL is updating like I want to, The back function is working too.
But the page transition is still happening.
What i'm doing wrong??
I need global app-wide access to a VideoElement to play it on user events on browsers like Safari and was wondering if storing the VideoElement in a context would be the best way to do that. I programmatically play my video through a redux action and in Safari that is not possible unless it has been played once through a user triggered event (like a click)
Is it possible to store an element (ref) within a context? The VideoElement will be then rendered within the component which I want to have my video, and then other components will also have access to the context and be able to call functions such as usePlayVideo that based on the context's state, will either call videoElement.play() if this is the first time the video is being played, or dispatch the redux action to play the video programmatically otherwise
It is possible to store a ref into context! You need to create a context at first. Then you need to pass value to the context provider and create a ref object using useRef hook. After that, you pass the ref into the value.
Now, You have a ref object sharing between components under the context provider and if you want to retrieve or pass a new ref, you could use useContext hook to deal with it.
Here is the demo (codesandbox).
Here is the sample code.
import { createContext, useContext, useEffect, useRef, useState } from "react";
import "./styles.css";
const MyContext = createContext();
export const ContextStore = (props) => {
const ref = useRef();
return <MyContext.Provider value={ref}>{props.children}</MyContext.Provider>;
};
export default function App() {
return (
<>
<ContextStore>
<MyComponent />
<MyComponent2 />
</ContextStore>
</>
);
}
const MyComponent = () => {
const myContext = useContext(MyContext);
return (
<div className="App" ref={myContext}>
<h1>Hello MyComponent1</h1>
</div>
);
};
const MyComponent2 = () => {
const myContext = useContext(MyContext);
const [divRef, setDivRef] = useState();
useEffect(() => {
setDivRef(myContext);
}, [myContext]);
return (
<div className="App">
<h1>{divRef?.current && divRef.current.innerText}</h1>
</div>
);
};
You can use this approach:
VideoContext.js
import { createContext, createRef, useContext } from "react";
const VideoContext = createContext();
const videoRef = createRef();
export const VideoContextProvider = (props) => {
return (
<VideoContext.Provider value={videoRef}>
{props.children}
</VideoContext.Provider>
);
};
export const useVideoContext = () => useContext(VideoContext);
and App.js for example:
import { useState, useEffect } from "react";
import { useVideoContext, VideoContextProvider } from "./VideoContext";
const SomeComponent = () => {
const videoRef = useVideoContext();
return (
<div ref={videoRef}>
<h1>Hey</h1>
</div>
);
};
const SomeOtherComponent = () => {
const [ref, setRef] = useState();
const videoRef = useVideoContext();
useEffect(() => {
setRef(videoRef);
}, [videoRef]);
return (
<div>
<h1>{ref?.current?.innerText}</h1>
</div>
);
};
export default function App() {
return (
<>
<VideoContextProvider>
<SomeComponent />
</VideoContextProvider>
{/* ... */}
{/* Some other component in another part of the tree */}
<VideoContextProvider>
<SomeOtherComponent />
</VideoContextProvider>
</>
);
}
code sandbox
Why not? I'll say. Let's see if we can setup an example.
const fns = {}
const addDispatch = (name, fn) => { fns[name] = fn }
const dispatch = (name) => { fns[name] && fns[name]() }
const RefContext = createContext({ addDispatch, dispatch })
export default RefContext
const Child1 = () => {
const [video, dispatchVideo] = useState(...)
const { addDispatch } = useContext(RefContext)
useEffect(() => {
addDispatch('video', dispatchVideo)
}, [])
}
const Child2 = () => {
const { dispatch } = useContext(RefContext)
const onClick = () => { dispatch('video') }
...
}
The above two childs do not have to share the same ancestor.
I didn't use ref the way you wanted, but i think you can pass your ref to one of the function. This is a very basic idea. I haven't tested it yet. But seems it could work. A bit
I used this approach:
first I creacted the context and ContextProvider;
import React, { useRef } from "react";
export const ScrollContext = React.createContext();
const ScrollContextProvider = (props) => {
return (
<ScrollContext.Provider
value={{
productsRef: useRef(),
}}
>
{props.children}
</ScrollContext.Provider>
);
};
export default ScrollContextProvider;
then Added my provider in my index.js:
root.render(
<React.StrictMode>
<ScrollContextProvider>
<App />
</ScrollContextProvider>
</React.StrictMode>
);
after that I used my context where I needed it:
import React, { useContext } from "react";
import { ScrollContext } from "../../store/scroll-context";
const Products = () => {
const scrollCtx = useContext(ScrollContext);
return (
<section ref={scrollCtx.productsRef}>
// your code...
</section>
);
};
In my case I wanted to to scroll to the above component clicking a button from a different component:
import React, { useContext } from "react";
import { ScrollContext } from "../../store/scroll-context";
function Header() {
const scrollCtx = useContext(ScrollContext);
const scrollTo = () => {
setTimeout(() => {
scrollCtx.productsRef.current.scrollIntoView({ behavior: "smooth" });
}, 0);
};
return (
<header>
//your code ...
<button alt="A table with chair" onClick={scrollTo}>Order Now<button />
</header>
);
}
No. It's not possible to use Ref on context api. React ref is considered to be used on rendering element.
What you're looking for is to forward the ref, so that you can consume them wherever you want.
I want text entry to be highlighted with different colors depending on the character entered.
My hunch is that it is possible to do this by adding <span> elements with the appropriate styling inside of a contenteditable div.
Is there a better way?
Hi Please check this example. I used material-ui
import React, {useState} from 'react';
import Box from '#material-ui/core/Box';
import TextField from "#material-ui/core/TextField";
export default function BackgroundColor() {
const [text, setText] = useState('');
const [color, setColor] = useState('');
function changeHandler(event) {
setText(event.target.value);
if(event.target.value.toLowerCase() === 'a'){
setColor("primary.main");
}
else if(event.target.value.toLowerCase() === 'b'){
setColor("secondary.main");
}
else if(event.target.value.toLowerCase() === 'c'){
setColor("error.main");
}
else{
setColor("info.main");
}
}
return (
<div>
<TextField id="standard-basic" label="Standard" helperText="Type A or B or C" onChange={changeHandler} />
<Box color={color}>
{text}
</Box>
</div>
);
}
Depending on the complexity, you can also consider using Ace Editor
import React, { useState } from "react";
import AceEditor from "react-ace-builds";
import "./yamlHighlightRules";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ace";
import "./styles.css";
export default function App() {
const [text, setText] = useState("This is the most amazing initial text.");
const handleChange = input => {
setText(input);
};
return (
<div className="App">
<AceEditor
mode="yaml"
theme="github"
name="editor"
fontSize={15}
showPrintMargin={true}
showGutter={false}
highlightActiveLine={false}
value={text}
onChange={handleChange}
setOptions={{
showLineNumbers: true,
tabSize: 2,
readOnly: false
}}
height={"600px"}
width={"100%"}
/>
</div>
);
}
And then I edited an existing set of yaml highlighting rules, it's easier not starting from scratch.
import ace from "ace-builds/src-min-noconflict/ace";
import "ace-builds/src-noconflict/mode-text";
ace.define("ace/mode/yaml_highlight_rules", [], function(require, exports) {
const oop = require("../lib/oop");
const TextHighlightRules = require("./text_highlight_rules")
.TextHighlightRules;
const YamlHighlightRules = function() {
this.$rules = {
start: [
{
token: "highlight",
regex: /amazing/
}
]
};
this.normalizeRules();
};
oop.inherits(YamlHighlightRules, TextHighlightRules);
exports.YamlHighlightRules = YamlHighlightRules;
});
The token is your css class. Just add the prefix ace_ to it. Then you define a regular expression to determine what gets that class.
.ace_highlight {
background-color: yellow;
}
Here is a codesandbox where you can see it working.
And here are the docs on defining your own modes.
I am using axios library to fetch data from a json file through json-server.
When I am loading and using the response object in a single component it is working perfectly. But when I am passing this response object to child component from parent component it is not loading the data. Also not receiving any errors, can someone please help me to understand the difference and what is wrong with my approach?
//Scenario-1 : working perfectly fine:
import React, { useState, useEffect } from 'react';
import Display from './Display';
import Note from './note'
import axios from 'axios';
const App = () => {
const [notes, setNotes] = useState([])
const hook = () => {
axios.get('http://localhost:3001/notes')
.then(response => {
setNotes(response.data)
})
}
useEffect(hook, [])
return (
<div>
{notes.map(n => <Note key={n.id} note={n} />)}
</div>
)
}
export default App;
//Scenario-2 : Not working as expected, also no errors.
const Display = (props) => {
//Receiving data here, can see the values in console.
console.log('inside display, props.notex: ', props.notex);
const [notes, setNotes] = useState(props.notex);
//Blank object, why useState() method is not setting the value of "notes" from "props.notex".
console.log('inside display, notes: ', notes);
const generateRows = () => {
console.log('generateRows: ', notes)
return (
notes.map(n => <Note key={n.id} note={n} />)
)
}
return (
<div>
<ul>
{generateRows()}
</ul>
</div>
)
}
const App = () => {
const [notes, setNotes] = useState([])
const hook = () => {
axios.get('http://localhost:3001/notes')
.then(response => {
setNotes(response.data)
})
}
useEffect(hook, [])
return (
<div>
<Display notex={notes} />
</div>
)
}
export default App;
My guess is that useState is asynchronous, same as setState in Class components. Due to its async nature, you are not able to log anything - the log gets executed before the useState actually does anything.
If you really want to do it this way, you could initialize the value of the useState as an empty array and set up a useEffect hook, with the props.notex in your dependency array, something like this:
useEffect(() => {
if (props.notex) setNotes(props.notex)
}, [props.notex])
And then in the return
return (
<div>
<ul>
{notes.length && generateRows()}
</ul>
</div>
)
But you could just pass the props down from the parent to child without setting the state in the child component.
Hope this helps!