Hello I had an idea to make a hook to increase the font size and save preferences in localStorage
basically I have a state that goes from 1 to 4, and then when I click the button add I add +1 to the state until I reach number 4
and on the remove button I remove 1 from the state until 1
But I have doubts on how to save this to my location
basically if i don't use my useState just with getInitialValue It works normally.
like this gif, If I add the value manually it works:
but if I try to use my setFont I have problems (as it is saved in localStorage):
and i got this on localStorage :
code:
export default function App() {
const { fontSize, setSize } = useFontSize();
console.log(fontSize);
return (
<div className="App">
<button
onClick={() => {
setSize(fontSize + 1);
}}
>
add
</button>
<button
onClick={() => {
setSize(fontSize + 1);
}}
>
remove
</button>
</div>
);
}
hook:
export default function useFontSize(defaultSize = { size: 1 }) {
const [fontSize, _setSize] = useState(getInitialSize);
function getInitialSize() {
const savedSize = localStorage.getItem('_size_acessibility_font');
const parsedSize = JSON.parse(savedSize);
if (parsedSize) {
const { size } = parsedSize;
if (size >= 1 && size <= 4) {
return size;
}
} else {
return defaultSize.size;
}
}
useEffect(() => {
console.log(fontSize, 'on useEffect to set on localStorage');
localStorage.setItem(
'_size_acessibility_font',
JSON.stringify({ size: fontSize }),
);
}, [fontSize]);
return {
fontSize,
setSize: ({ setSize, ...size }) => {
console.log(size, 'on function set size');
if (size > 4) {
return _setSize(4);
}
if (size < 1) {
return _setSize(1);
}
return _setSize(size);
},
};
}
example:
https://codesandbox.io/s/focused-newton-x0mqd
I don't know if this is the best logic for this context, if someone can help me.
This seems a tad overengineered and upsets a few hooks idioms. For example, returning a named object pair for a hook is less typical than an array pair. The set function itself is complex and returns the result of the _setSize calls. Naming could be clearer if fontSize matched setSize by using setFontSize.
({ setSize, ...size }) is problematic since the caller is (correctly) providing an integer.
Here's a minimal, complete version that fixes these issues (local storage is mocked since Stack Snippets is sandboxed):
const localStorageMock = (() => {
const storage = {};
return {
getItem: k => storage[k],
setItem: (k, v) => {storage[k] = v.toString();}
};
})();
const {useState, useEffect} = React;
const useFontSize = (defaultSize=1) => {
const clamp = (n, lo=1, hi=4) => Math.min(hi, Math.max(n, lo));
const clean = n => isNaN(n) ? defaultSize : clamp(+n);
const storageName = "_size_acessibility_font";
const fromStorage = clean(localStorageMock.getItem(storageName));
const [fontSize, setFontSize] = useState(fromStorage);
useEffect(() => {
localStorageMock.setItem(storageName, fontSize);
}, [fontSize]);
return [fontSize, size => setFontSize(clean(size))];
};
const App = () => {
const [fontSize, setFontSize] = useFontSize();
return (
<div>
<div>Font size: {fontSize}</div>
<button onClick={() => setFontSize(fontSize + 1)}>
+
</button>
<button onClick={() => setFontSize(fontSize - 1)}>
-
</button>
</div>
);
};
ReactDOM.createRoot(document.querySelector("#app"))
.render(<App />);
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="app"></div>
In useFontSize, you return
return {
fontSize,
setSize: ({ setSize, ...size }) => {
console.log(size, 'on function set size');
if (size > 4) {
return _setSize(4);
}
if (size < 1) {
return _setSize(1);
}
return _setSize(size);
},
};
However, in App, you call setSize with just a number setSize(fontSize + 1); when it is expecting an object.
If you change useFontSize to return
return {
fontSize,
setSize: (size) => {
console.log(size, 'on function set size');
if (size > 4) {
return _setSize(4);
}
if (size < 1) {
return _setSize(1);
}
return _setSize(size);
},
};
It should work.
Note, you will want to clear your current local storage, or add some error checking.
Also note, although it is just an example, both add and remove use fontSize + 1
Related
I want to create a contact form where the form fields are changed after they are filled.
For example when you fill the email field, you press enter or click the Next button it disappears and the next field appears. There will be different form field types (text, email, select, etc).
What i want to achieve is based on this form, but it is coded in vanilla js and i want to write it in React from scratch.
For now my basic code is this:
ContactForm.js file:
import { useState, useEffect } from "react";
import Fields from "./Fields";
const ContactForm = ({ fields }) => {
const [current, setCurrent] = useState(0);
const [show, setShow] = useState(true);
return (
<div className='container'>
<div className='fs-form-wrap' id='fs-form-wrap'>
<Fields fields={fields} isCurrent={current} />
<button onClick={() => setCurrent(current + 1)}>Continue</button>
</div>
</div>
);
};
Fields.js file:
import { useState } from "react";
import Field from "./Field";
const Fields = ({ fields, isCurrent }) => {
return (
<form id='myform' className='fs-form fs-form-full'>
<ol className='fs-fields'>
{fields.map((field, index) => {
return (
<Field
placeHolder={field.placeholder}
title={field.title}
type={field.type}
key={index}
isCurrent={isCurrent}
/>
);
})}
</ol>
</form>
);
};
export default Fields;
Field.js file:
import { useState, useEffect } from "react";
import styled from "styled-components";
const Field = ({ placeHolder, type, title, isCurrent }) => {
return (
<TheField isCurrent={isCurrent}>
<label className='fs-field-label fs-anim-upper' htmlFor='q2'>
{title}
</label>
<input
className='fs-anim-lower'
id='q2'
name='q2'
type={type}
placeholder={placeHolder}
required
/>
</TheField>
);
};
export default Field;
const TheField = styled.li`
visibility: ${(props) => (props.isCurrent === 0 ? "visible" : "hidden")};
`;
Based on this code, initially i get my 2 fields which are coming from my dummy-data.json file but when i click on the button, both of them disappear.
I know that my code is still a mess, but i first want to make them appear one by one, then i think i know the logic for the other parts.
Any help would be appreciated.
EDIT with the solution from #zergski below:
import { useState, useEffect } from "react";
import Field from "./Field";
import { BidirectionalIterator } from "./Iterator";
const ContactForm = ({ fields }) => {
const [current, setCurrent] = useState(0);
const [show, setShow] = useState(true);
const options = { startIndex: 0, loop: false, clamp: true };
const list = new BidirectionalIterator(fields, options);
return (
<div className='container'>
<div className='fs-form-wrap' id='fs-form-wrap'>
<form id='myform' className='fs-form fs-form-full'>
<ol className='fs-fields'>
<li>{list}</li>
{/* {fields.map((field, index) => {
return (
<Field
placeHolder={field.placeholder}
title={field.title}
type={field.type}
key={index}
/>
);
})} */}
</ol>
{/* <Submit clickHandler={submitClickHandler} text={submitText} /> */}
</form>
<button onClick={() => list.next()}>Continue</button>
</div>
</div>
);
};
you need to create your own iterator... either through the use of generators or a custom class.. here's one I've written
export class BidirectionalIterator {
// TODO: support for other data types
// #iterate_over: string = 'index'
static index: number = 0
static start_index: number = 0
static looped: boolean = false
static clamped: boolean = true
static data: PropertyKey[]
static ct: number = 0
static data_len: number = 0
/** Only supports iterables for now.
* #param data - the object to be iterated
* #param options.startIndex - A negative value of less than 0 sets the index at the end of the iterable
* #param options.loop - loop to the opposite end of iterable (overrides the clamp option setting)
* #param options.clamp - iterator won't finish upon reaching iterable bounds
*
* #caution - DO NOT use a for of/in loop on the iterator if either the loop option is set to true!
*/
constructor(data: any[] = [], { startIndex = 0, loop = false, clamp = true }: BidirectionalIteratorOptions = {}) {
BidirectionalIterator.setData(data)
BidirectionalIterator.start_index = startIndex
BidirectionalIterator.clamped = loop ? false : clamp
BidirectionalIterator.looped = loop
}
static [Symbol.iterator]() {
return this
}
static setData(data: any) {
this.data = data
// TODO: finish support for different collection types
let [ct, data_len] =
data instanceof Array ? [1, data.length]
: data instanceof Map ? [2, data.size]
: data instanceof Set ? [3, data.size]
: [4, -1]
this.ct = ct
this.data_len = data_len
this.resetIndex()
}
static resetIndex() {
this.setIndex(this.start_index < -1 ? this.len : this.start_index)
}
static setIndex(idx: number) {
this.index = idx - 1
}
static get len(): number {
return this.data.length
}
// ! well I'm definitely repeating myself....
static get entry() {
this.index = num_between(this.index, 0, this.len - 1)
return {
index: this.index,
value: this.data[this.index]
}
}
static get next_entry() {
this.index = num_between(this.index, 0, this.len - 1)
return {
index: this.index + 1,
value: this.data[this.index] || (this.looped ? this.data[0] : null)
}
}
static get prev_entry() {
this.index = num_between(this.index, 0, this.len - 1)
return {
index: this.index - 1,
value: this.data[this.index + 1] || (this.looped ? this.data[this.len - 1] : null)
}
}
static next() {
let value, done
(done = this.index >= this.len)
? this.index = this.len
: done = ++this.index >= this.len
// value = this.data[done ? this.len-1 : this.index]
value = this.data[num_between(this.index, 0, this.len)]
if (done)
this.looped
? value = this.data[this.index = 0]
: this.clamped
? value = this.data[this.len - 1] : null
return {
index: this.index,
value,
done
}
}
static prev() {
let value, done
(done = this.index <= -1)
? this.index = -1
: done = --this.index <= -1
// value = this.data[done ? 0 : this.index]
value = this.data[num_between(this.index, 0, this.len)]
if (done)
this.looped
? value = this.data[this.len - 1]
: this.clamped
? value = this.data[0] : null
return {
index: this.index,
value,
done
}
}
}
so to use it just instantiate the class..
const list = new BidirectionalIterator(data_array, options)
// and use with .next() & .prev() methods on mouse input
// e.g this will return the next entry in given array
list.next()
it's written in typescript though, so you need to remove all the type declarations
I am making a simple e-commerce website but I've ran into an issue where useEffect() won't fire after making a state change. This code snippet I'll include is for the "shopping cart" of the website and uses localStorage to store all items in the cart. My state will change when quantity changes in the QuantChange() function but will not trigger useEffect(). When I refresh the page after changing an item's quantity, the new quantity won't persist and the old quantity is shown instead. What am I doing wrong? Thanks in advance.
import React, { useState, useEffect } from 'react';
import { SetQuantity } from '../utils/Variables';
import { CartItem } from './CartItem';
const CartView = () => {
const [state, setState] = useState(
JSON.parse(localStorage.getItem('cart-items'))
? JSON.parse(localStorage.getItem('cart-items'))
: []
);
useEffect(() => {
console.log('Updating!');
updateLocalStorage();
});
const updateLocalStorage = () => {
localStorage.setItem('cart-items', JSON.stringify(state));
};
const quantChange = (event) => {
setState((prevState) => {
prevState.forEach((item, index) => {
if (item._id === event.target.id) {
item.quantity = SetQuantity(parseInt(event.target.value), 0);
prevState[index] = item;
}
});
return prevState;
});
};
const removeItem = (id) => {
setState((prevState) => prevState.filter((item) => item._id != id));
};
// Fragments need keys too when they are nested.
return (
<>
{state.length > 0 ? (
state.map((item) => (
<CartItem
key={item._id}
ID={item._id}
name={item.name}
quantity={item.quantity}
changeQuant={quantChange}
delete={removeItem}
/>
))
) : (
<h1 className="text-center">Cart is Empty</h1>
)}
</>
);
};
export default CartView;
import React, { Fragment } from 'react';
import { MAX_QUANTITY, MIN_QUANTITY } from '../utils/Variables';
export const CartItem = (props) => {
return (
<>
<h1>{props.name}</h1>
<input
id={props.ID}
type="number"
max={MAX_QUANTITY}
min={MIN_QUANTITY}
defaultValue={props.quantity}
onChange={props.changeQuant}
/>
<button onClick={() => props.delete(props.ID)} value="Remove">
Remove
</button>
</>
);
};
export const MIN_QUANTITY = 1;
export const MAX_QUANTITY = 99;
// Makes sure the quantity is between MIN and MAX
export function SetQuantity(currQuant, Increment) {
if (Increment >= 0) {
if (currQuant >= MAX_QUANTITY || (currQuant + Increment) > MAX_QUANTITY) {
return MAX_QUANTITY;
} else {
return currQuant + Increment;
}
} else {
if (currQuant <= MIN_QUANTITY || (currQuant + Increment) < MIN_QUANTITY) {
return MIN_QUANTITY;
} else {
return currQuant + Increment;
}
}
}
You are not returning new state, you are forEach'ing over it and mutating the existing state and returning the current state. Map the previous state to the next state, and for the matching item by id create and return a new item object reference.
const quantChange = (event) => {
const { id, value } = event.target;
setState((prevState) => {
return prevState.map((item) => {
if (item._id === id) {
return {
...item,
quantity: SetQuantity(parseInt(value), 0)
};
}
return item;
});
});
};
Then for any useEffect hook callbacks you want triggered by this updated state need to have the state as a dependency.
useEffect(() => {
console.log('Updating!');
updateLocalStorage();
}, [state]);
My map dont appears in my component. I'm trying to make a carousel to show phrases and authors (one testimonial / author at time). I put the map in an array but it doesn't work. I have no idea what the best approach would be. I need a little help.
useQuoteQuery.js: (grabbing the data)
import { useStaticQuery, graphql } from 'gatsby'
export const useQuoteQuery = () => {
const data = useStaticQuery(graphql`
query QuoteQuery {
wpPage(databaseId: { eq: 13 }) {
id
ACF_HomePage {
socialProve {
testimony
author
}
}
}
}
`)
return data
}
on graphql: (it works perfectly)
Quote.js
import React, { useState, useEffect } from 'react'
import { useQuoteQuery } from '../../hooks/useQuoteQuery'
import QuoteImg from '../../images/quote.svg'
import { Content, Wrapper } from './Quote.styles'
import { BiRightArrow, BiLeftArrow } from 'react-icons/bi'
const Quote = () => {
const {
wpPage: { ACF_HomePage: data }
} = useQuoteQuery()
// edited - map return array but returns: Array(3)
// 0: {$$typeof: Symbol(react.element) ......
const quotes = data.socialProve.map(quote => {
return <li key={quote.toString()}>{quote.socialProve}</li>
})
// set interval
useEffect(() => {
const timer = window.setInterval(() => {
setActiveIndex(prev => (prev + 1 >= quotes.length ? 0 : prev + 1))
}, 5000)
return () => {
window.clearInterval(timer)
}
}, [quotes])
const [activeIndex, setActiveIndex] = useState(0)
const activeQuote = quotes[activeIndex]
const handleNextClick = () => {
setActiveIndex(prev => (prev + 1 >= quotes.length ? 0 : prev + 1))
}
const handlePrevClick = () => {
setActiveIndex(prev => prev - 1)
}
return (
<Wrapper>
<Content>
<img src={QuoteImg} alt="aspas" />
<h6>{activeQuote.testimony}</h6>
<p>{activeQuote.author}</p>
<BiLeftArrow
size="20"
className="button-arrow"
onClick={handlePrevClick}
>
Anterior
</BiLeftArrow>
<BiRightArrow
size="20"
className="button-arrow"
onClick={handleNextClick}
>
Próximo
</BiRightArrow>
</Content>
</Wrapper>
)
}
export default Quote
the result:
There is no error in the vs code terminal.
The quotes array is wrapping the array produced by the .map in an extraneous array. Remove the extra array around the result of the .map:
const quotes = data.socialProve.map((quote) => {
return <div key={quote.toString()}>{quote.socialProve}</div>;
});
I've got the following search suggest with React hooks that uses react-hotkeys-hooks to manage keypress.
Why does selectedUserItem not update on keypress Enter? It stays 0 while the up and down keys change.
import { useHotkeys } from "react-hotkeys-hook";
import React, { useState } from "react";
import "./styles.css";
const itemsByName = [
{
id: 1,
name: "Ice Cream"
},
{
id: 2,
name: "Banana Pudding"
},
{
id: 3,
name: "Chocolate Cake"
},
{
id: 4,
name: "Sponge Cake"
},
{
id: 5,
name: "Carrot Cake"
}
];
const App = () => {
const [selectedUserItem, setSelectedUserItem] = useState(0);
// const [create] = useMutation(SAVE_USER_ITEM, {
// refetchQueries: ["UserItemsQuery"]
// })
const itemSelect = (e, item) => {
e.preventDefault();
// create({ variables: { input: { id: item.id } } });
// console.log(item)
};
const increment = selectedUserItem => {
const max = itemsByName.length - 1;
return max > selectedUserItem ? selectedUserItem + 1 : max;
};
const decrement = selectedUserItem => {
const min = 0;
return min < selectedUserItem ? selectedUserItem - 1 : min;
};
useHotkeys(
"*",
(event, handler) => {
// console.log(handler)
switch (event.key) {
case "ArrowDown":
setSelectedUserItem(selectedUserItem => increment(selectedUserItem));
break;
case "ArrowUp":
setSelectedUserItem(selectedUserItem => decrement(selectedUserItem));
break;
case "Enter":
console.log(selectedUserItem);
const userItem = itemsByName[selectedUserItem];
console.log(userItem);
break;
default:
console.log(event.key);
break;
}
},
{
filter: () => true
}
);
return (
<div className="absolute w-3/4 mt-16 ml-8 py-2 bg-white shadow-xl rounded-lg">
<h1>Index: {selectedUserItem}</h1>
{itemsByName.map((item, i) => {
return (
<div
href="#"
onClick={e => itemSelect(e, item)}
className={`${selectedUserItem === i ? "hovered" : ""} dessert`}
key={item.id}
>
{item.id}: {item.name}
</div>
);
})}
</div>
);
};
export default App;
useHotkeys internals use the useCallback and useEffect hooks, which need to know when some of its dependencies change. To make sure it works well with these hooks, useHotkeys offers to pass a deps array, like the other hooks mentioned, as its last parameter.
deps: any[] = []: The dependency array that gets appended to the memoization of the callback. Here you define the inner dependencies of your callback. If for example your callback actions depend on a referentially unstable value or a value that will change over time, you should add this value to your deps array. Since most of the time your callback won't depend on any unstable callbacks or changing values over time you can leave this value alone since it will be set to an empty array by default.
In your code, it would looks like this:
// These never changes and do not rely on the component scope, so they
// can be defined safely outside the component.
const increment = selectedUserItem => {
const max = itemsByName.length - 1;
return max > selectedUserItem ? selectedUserItem + 1 : max;
};
const decrement = selectedUserItem => {
const min = 0;
return min < selectedUserItem ? selectedUserItem - 1 : min;
};
const App = () => {
const [selectedUserItem, setSelectedUserItem] = useState(0);
useHotkeys(
"*",
(event, handler) => {
switch (event.key) {
case "ArrowDown":
setSelectedUserItem(increment);
break;
case "ArrowUp":
setSelectedUserItem(decrement);
break;
case "Enter":
console.log(selectedUserItem, itemsByName[selectedUserItem]);
break;
default:
console.log(event.key);
break;
}
},
{
filter: () => true
},
// The dependencies array which ensure that the data is up to date in the callback.
[selectedUserItem, setSelectedUserItem]
);
// rest of the component
I have a Chat component which uses API to populate the messages state, also there are different areas that have different chats which I pass as props to the component.
In this component I have 3 useEffects but I am interested in two of them which don't work properly. In the first useEffect I have some code that basically resets the messages state on area change to undefined. I need to do this to be able to distinguish between the API not being called yet where I display a loading component <Spinner /> or if the API has been called and it has retrieved an empty array to show the <NoData> component.
The problem that I have is that when I change areas the useEffects get triggered as they should but the first useEffect doesn't update the messages state to undefined before the second useEffect is called. And after a rerender because of history push the messages come as undefined but then the second useEffect doesn't get triggered anymore. I don't get why the state is not being updated in the first useEffect before the second. Also the weird thing is this used to work for me before now it doesn't. I changed some stuff up without pushing to git and now I am puzzeled. Code below:
export default function ChatPage({ history, match, area, ...props }) {
const [templates, setTemplates] = useState([]);
const [advisors, setAdvisors] = useState([]);
const [messages, setMessages] = useState(undefined);
const [conversation, setConversation] = useState([]);
const [chatToLoad, setChatToLoad] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [linkOrigin, setLinkOrigin] = useState("");
const [headerText, setHeaderText] = useState("");
// useEffect used to reset messages and conversation state
// triggered on area change(messages and conversation reset)
// and customer ID change(conversation reset).
// Required to distinguish between API call not being made yet
// and API returning no data.
useEffect(() => {
if (match.params.id) {
setLinkOrigin(match.params.id);
}
if (messages) {
if (match.params.id && messages.length !== 0) {
let matches = messages.filter(
(message) => message.ORIGINATOR === match.params.id
);
if (matches.length !== 0 && match.params.id === linkOrigin) {
setMessages(undefined);
history.push("/chats/" + match.params.area);
}
}
}
setConversation([]);
}, [area, match.params.id]);
// API calls
useEffect(() => {
if (templates.length === 0) {
api.getTemplates().then((templates) => {
setTemplates(templates);
});
}
if (advisors.length === 0) {
api.getAgents().then((advisors) => {
setAdvisors(advisors);
});
}
if (!messages || messages.length === 0) {
chooseQueue(match.params.area).then((queuesData) => {
let queues = queuesData.data.map((message) => ({
DATE_SORT: message.DATE_RECIEVED,
UNIQUEID: message.UNIQUEID,
ORIGINATOR: message.ORIGINATOR,
MESSAGE: message.MESSAGE,
MSG_TYPE: "SMS_OUTBOUND",
ASSIGNED_TO: message.ASSIGNED_TO || null,
}));
setMessages(orderMessagesByDate(queues));
setChatToLoad(queues[0]);
});
}
}, [area]);
useEffect(() => {
if (messages) {
if (messages.length) {
let loadId = match.params.id ? match.params.id : messages[0].ORIGINATOR;
const params = {
MobileNumber: loadId,
};
messagingApi.conversationHistory(params).then((conversationData) => {
setConversation(
conversationData.data.map((message) => ({
DATE_SORT: message.DATE_SORT,
UNIQUEID: message.UNIQUEID,
ORIGINATOR: message.ORIGINATOR,
MESSAGE: message.MESSAGE,
MSG_TYPE: message.MSG_TYPE2.replace("MobileOriginated", "SMS"),
ASSIGNED_TO: message.ASSIGNED_TO || null,
}))
);
});
setChatToLoad(
messages.find((message) => message.ORIGINATOR === loadId)
);
history.push("/chats/" + match.params.area + "/" + loadId);
}
}
}, [messages]);
function chooseQueue(queueType) {
switch (queueType) {
case "myqueue":
setHeaderText("My chats");
return queuesApi.getMyActiveQueues(area);
case "mycompleted":
setHeaderText("My completed chats");
return queuesApi.getMyCompletedQueues();
case "queues":
setHeaderText("Chats");
return queuesApi.getQueues(area);
case "completed":
setHeaderText("Completed chats");
return queuesApi.getCompletedQueues();
default:
setHeaderText("My chats");
return queuesApi.getQueues(area);
}
}
function classifyMessage(message) {
return message.MSG_TYPE.includes("OUTBOUND") ||
message.MSG_TYPE.includes("FAULT_TEST")
? "outbound"
: "inbound";
}
async function submitMessage(message) {
var params = {
number: message.ORIGINATOR,
message: message.MESSAGE,
smssize: message.MESSAGE.length
};
await messagingApi.replyToCustomer(params).then((res) => {
if (res.data[0].RVALUE === "200") {
let extendedMsg = [...messages, message];
let extendedConversation = [...conversation, message];
setConversation([...extendedConversation]);
setMessages(orderMessagesByDate([...extendedMsg]));
}
});
}
function orderMessagesByDate(list) {
return list.sort(function(x, y) {
return new Date(y.DATE_SORT) - new Date(x.DATE_SORT);
});
}
const modalHandler = () => {
setIsOpen(!isOpen);
};
let chatConfig = {
channelSwitch: true,
channels: channels,
templateModal: true,
templates: templates,
advisorModal: true,
advisors: advisors,
};
const onActiveChatChange = (message) => {
history.push("/chats/" + match.params.area + "/" + message.ORIGINATOR);
const params = {
MobileNumber: message.ORIGINATOR,
};
messagingApi.conversationHistory(params).then((conversationData) => {
setConversation(
conversationData.data.map((message) => ({
DATE_SORT: message.DATE_SORT,
UNIQUEID: message.UNIQUEID,
ORIGINATOR: message.ORIGINATOR,
MESSAGE: message.MESSAGE,
ASSIGNED_TO: message.ASSIGNED_TO || null,
}))
);
});
};
return (
<div data-test="component">
<BodyHeader
text={headerText}
children={
<FontAwesomeIcon
icon="plus-square"
aria-hidden="true"
size="2x"
onClick={modalHandler}
/>
}
/>
{messages && chatToLoad ? (
<>
<ChatWindow
messages={messages}
conversation={conversation}
chatToLoad={chatToLoad}
onActiveChatChange={onActiveChatChange}
classifyMessage={classifyMessage}
submitMessage={submitMessage}
config={chatConfig}
/>
<SendMessageModal isOpen={isOpen} toggle={modalHandler} />
</>
) : !messages ? (
<Spinner />
) : (
<NoDataHeader>There are no chats in this area</NoDataHeader>
)}
</div>
);
}
You can't get what you want this way. A state change applied in a useEffect won't have effect until the next rendering cycle, the following callbacks will still see the current const value.
If you want to change the value in the current rendering cycle the only option you have is to relax your const into let and set the variables yourself.
After all: you were expecting a const to change isn't it? ;)