We Keep Coding

Warning: Text content did not match in React 18

recently the project I am working on has been upgraded to React 18. By then, suddenly a lot of issues with hydration have started to appear as warnings/errors in the console. The one I'm struggling with is "Warning: Text content did not match":
Code of this component:
<div className="O75-product-faq__questions is-active accordion--initialized">
{
dataForSelect.length > 1 && <h4 className="O75-product-faq__questions__name js-category-name">{props.questionsByCategories[selectedCategory?.value].name}</h4>
}
{
props.questionsByCategories[selectedCategory?.value].questions.map((element, i) => (
<div key={i} className="O75-product-faq__questions__item">
{(element.question || props.showOnlyAnswer) && <div className={`O75-product-faq__questions__item__button${openedElement === i ? ' has-accordion-open' : ''}`} onClick={() => openElement(i)}>{element.question}</div>}
<AnimateHeight height={openedElement === i ? 'auto' : 0} duration={transitionDisabled ? 0 : 400}>
<div className="O75-product-faq__questions__item__content" dangerouslySetInnerHTML={{ __html: element.answer }} />
</AnimateHeight>
</div>))
}
</div>
I know that this issue results from the difference between client and server side rendering, but I don't know how to fix it and no other similar question contained solution that worked in my case.
Rest of the file, in case if the issue is not with aforementioned part:
import React, { useMemo, useState } from 'react';
import type { ReactElement } from 'react';
import AnimateHeight from 'react-animate-height';
import { BaseSelect, SelectOption } from '../molecules/base-select';
import type { FrequentlyAskedCategory } from './frequentlyAskedQuestion';
import { fromBase64 } from '../shared-services/base64Service';
interface FaqPanelProps {
mainTitle?: string;
menuTitle?: string;
showOnlyAnswer: boolean;
currentPageUrl: string;
questionsByCategories: Record<string, FrequentlyAskedCategory>,
faqStructuredDataBase64: string;
}
const FAQPanel = (props: FaqPanelProps): ReactElement => {
const categories = Object.keys(props.questionsByCategories);
const dataForSelect: Array<SelectOption> = categories.map(key => ({ label: props.questionsByCategories[key].name, value: key }));
const noOpenedElementIndex = -1;
const [openedElement, setOpenedElement] = useState<number>(-1);
const [selectedCategory, setSelectedCategory] = useState<SelectOption>(dataForSelect.length > 0 ? dataForSelect[0] : null);
const [transitionDisabled, setTransitionDisabled] = useState<boolean>(false);
const parsedStructuredData = useMemo(() => {
if(props.faqStructuredDataBase64 != null && props.faqStructuredDataBase64 !== ""){
return fromBase64(props.faqStructuredDataBase64);
}
return "";
}, [props.faqStructuredDataBase64]);
const selectNewCategory = (option: SelectOption): void => {
setTransitionDisabled(true);
setOpenedElement(noOpenedElementIndex);
setSelectedCategory(option);
}
const openElement = (index: number): void => {
if (transitionDisabled) {
setTransitionDisabled(false);
}
setOpenedElement(index === openedElement ? noOpenedElementIndex : index);
}
const speakableJson = JSON.stringify({
"#context": "https://schema.org/",
"#type": "WebPage",
"name": props.mainTitle,
"speakable":
[".O75-product-faq__headline",
".O75-product-faq__questions__item"],
"url": props.currentPageUrl
});
const hasFAQStructuredData = parsedStructuredData != null && parsedStructuredData !== "";
return (
<div className="container">
<section className="O75-product-faq" >
{
props.mainTitle
? <h2 className="O75-product-faq__headline">{props.mainTitle}</h2>
: <h4 className="O75-product-faq__categories-headline">{props.menuTitle}</h4>
}
<div className="flex">
{dataForSelect.length > 1 &&
<div className="O75-product-faq__categories">
<div className="filter__list is-hidden-sm filter">
{
dataForSelect.map((element, i) => (
<button className={`filter__btn js-filter__btn${element.value === selectedCategory?.value ? " is-active" : ""}`} key={i} onClick={() => selectNewCategory(element)}>
{element.label}
</button>))
}
</div>
<div className="filter__group is-hidden-md">
<BaseSelect selectedValue={selectedCategory}
handleChange={selectNewCategory}
options={dataForSelect} />
</div>
</div>
}
{categories.length > 0 &&
<div className="O75-product-faq__questions is-active accordion--initialized">
{
dataForSelect.length > 1 && <h4 className="O75-product-faq__questions__name js-category-name">{props.questionsByCategories[selectedCategory?.value].name}</h4>
}
{
props.questionsByCategories[selectedCategory?.value].questions.map((element, i) => (
<div key={i} className="O75-product-faq__questions__item">
{(element.question || props.showOnlyAnswer) && <div className={`O75-product-faq__questions__item__button${openedElement === i ? ' has-accordion-open' : ''}`} onClick={() => openElement(i)}>{element.question}</div>}
<AnimateHeight height={openedElement === i ? 'auto' : 0} duration={transitionDisabled ? 0 : 400}>
<div className="O75-product-faq__questions__item__content" dangerouslySetInnerHTML={{ __html: element.answer }} />
</AnimateHeight>
</div>))
}
</div>
}
</div>
{hasFAQStructuredData && <script suppressHydrationWarning type="application/ld+json" dangerouslySetInnerHTML={{__html:parsedStructuredData } }></script>}
<script suppressHydrationWarning type="application/ld+json" dangerouslySetInnerHTML={{__html: speakableJson}} ></script>
</section>
</div>
)
}
export { FAQPanel };
export type { FaqPanelProps }
Does anyone knows how to fix it?

Problem trying conditional rendering in map() method in ReactJS

I'm having a problem where I'm using map method to create a table, then on each row of the table I have a Button that triggers conditional rendering based on state (true/false).
The problem is that all conditional renders are based on the same state this.state.displayColorPicker ? So when you click the button on one row it triggers the conditional render on all the rows.
Here is my function that renders the body of the Table :
display_table = () => {
if (!this.state.data) {
return <tr />
}
if (!this.state.data[1]) {
return <tr />
}
let xx = this.state.valuesplayers;
let i=-1;
let j=-1;
let k=500;
let l = -400;
if (typeof xx !== 'undefined' && xx !== 's') {
let xx3 = xx.map((player_row, row) =>{
i = i+1;
return (<tr className='dataRow' key={i} id={i}>{
player_row.map((player_col, col)=>{
if (this.state.data[1][col].length > 2) {
k=k+1;
return(<td key={'displayTable'+k} style={{backgroundColor: this.state.valuesplayers[row][col] === this.state.savedData[row][col] ? '' : 'yellow'}}><select key={this.state.valuesplayers[row][col]+k+0.5} value={this.state.valuesplayers[row][col]} onChange={e => this.handleChangeCell(e, row, col)}>
{this.state.data[1][col].map((DefValue, index) => {
i+=1;
if (index >= 2) {
return(<option key={'option' +i}>{DefValue}</option>);
}
return'';
})}
</select></td>)
} else if (this.state.data[1][col][0] === "Color") {
l = l+1;
const popover = {
position: 'absolute',
zIndex: '2',
top :'55px',
right:'0px',
}
const cover = {
position:'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
}
return(<td className='SliderPicker' key={'couleur'+l} style={{backgroundColor: this.state.valuesplayers[row][col] === this.state.savedData[row][col] ? '' : 'yellow'}}>
<div className='ColorWrapper'>
<button className='colorButton' style={{borderColor: this.state.valuesplayers[row][col] === this.state.savedData[row][col] ? '' : this.state.valuesplayers[row][col],
borderWidth: this.state.valuesplayers[row][col] === this.state.savedData[row][col] ? '' : '5px' }} onClick={e => this.handleClick(e) }>Pick Color
</button>
{this.state.displayColorPicker ?
<div style={ popover }>
<div style={ cover } onClick={e => this.handleClose(e) }/>
<SketchPicker key={'ColorSelector'+l+1.5} type='color' color={this.state.valuesplayers[row][col]} value={this.state.valuesplayers[row][col]}
onChange={color => this.handleChangeColor(color, row, col)}/>
</div> : null }
</div>
</td>)
}
else {
j+=2;
return(<td key={'cellule'+j} style={{backgroundColor: this.state.valuesplayers[row][col] === this.state.savedData[row][col] ? '' : 'yellow'}}>
<input key={'inputText'+k+1.5} type="text" className='inputTable' value={this.state.valuesplayers[row][col]}
onChange={e => this.handleChangeCell(e, row, col)}/></td>)
}
})
}
<td className='ButtonRow' key={'buttonRow'+i}>
<button key={'DelRow' + i} onClick={this.delARow} className='DeleteRow'>X</button>
<button key={'AddRow' + i} onClick={this.addARow} className='AddRow'>+</button>
</td></tr>
)
})
return(xx3);
}
else {
return <td key='display table error'/>
}
}
Currently my state is declared in the constructor method :
constructor(props) {
super(props);
this.state = {
displayColorPicker: false,
};
}
If someone could help me to map a different state for each row (or any other idea that could work)
Thanks in advance.
Edit : some HandleChange functions :
handleChangeCell(e, row, col) {
let newplayers2 = this.state.valuesplayers;
newplayers2[row][col] = e.target.value;
this.setState({valuesplayers: newplayers2});
}
handleChangeColor(color, row, col) {
this.setState({color: color.hex});
console.log('color', color.hex)
let newplayers2 = this.state.valuesplayers;
newplayers2[row][col] = color.hex;
this.setState({valuesplayers: newplayers2});
}

ComponentDidMount is not firing in my case

It is main class where I am calling the child component (DeviceReplacementRequestsList.js). And child component's componentDidMount is not working. I don't know why this is happening. I saw some other answers but I think that were not related to my case.
Main Component.js
class DevicesTypes extends React.Component {
module_name = "Device Types";
create_function = "create_device_type";
get_function = "get_device_type";
render() {
return (
<WidgetGrid>
{
this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members && this.props.modules[this.module_name].members.find((x) => { return x.id == this.create_function }) ?
<article className="col-sm-5">
<NewDeviceType />
</article> : null
}
{
this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members && this.props.modules[this.module_name].members.find((x) => { return x.id == this.get_function }) ?
<article className="col-sm-7">
<DeviceTypeList permissions={this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members ? this.props.modules[this.module_name].members : []} />
</article> : null}
{
this.props.modules && this.props.modules[this.module_name] ?
<article className="col-sm-7">
<Text2Speech/>
</article> : null
}
{
this.props.modules && this.props.modules[this.module_name] ?
<article className="col-sm-5">
<NewDeviceReplacement/>
</article>: null
}
{
this.props.modules && this.props.modules[this.module_name] ?
<article className="col-sm-7">
<DeviceReplacementRequestsList/>
</article> : null
}
</WidgetGrid>
)
}
}
In last component DeviceReplacementRequestsList.js my componentDidMount is not triggering
DeviceReplacementRequestsList.js
export default class DeviceReplacementList extends React.Component {
constructor() {
super();
this.state = {
deviceData : [],
spinner : true
}
}
componentDidMount() {
console.log("hello")
this.getDeviceReplacementRequests();
}
getDeviceReplacementRequests() {
const queryPrams = "";
ds.getDeviceReplacementRequests(queryPrams,data => {
console.log(data);
this.setState({
deviceData : data
})
}, err => {
})
}
handleChanges(e) {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div>
<JarvisWidget editbutton={false} deletebutton={false} color="blueDark">
<header>
<span className="widget-icon"> <i className="fa fa-edit" /></span>
<h2>All Device Types</h2>
<button className="btn btn-trans float-right" type="button" onClick={this}>
<i className="fa fa-refresh"></i>
</button>
<div className="col-md-12">
<div className="loader"></div>
</div>
</header>
</JarvisWidget>
</div>
)}

Have you tried binding it first inside the constructor?
this.getDeviceReplacementRequests = this.getDeviceReplacementRequests.bind(this);

React TypeScript: Cannot get map() inside other map() in render() to work

I want to render out messages and their replies in React (with TypeScript).
Messages are stored inside an array in the state and replies are stored inside a different array inside the state.
This is my current code, which results in not rendering out the message blocks:
public render(): React.ReactElement<ISpfxConversationsProps> {
const { channelTopics, topicReplies, errorMessage } = this.state;
const hideTitleContainer = this.props.isEditMode || this.props.title ? '' : styles.hidden;
const wpTitleClasses = `${styles.webpartHeader} ${hideTitleContainer}`;
return (
<div className={ styles.spfxTecanTeamsConversations }>
<div className={ styles.container }>
<div className={ wpTitleClasses }>
{ this.props.isEditMode && <textarea onChange={this.setTitle.bind(this)} className={styles["edit"]} placeholder={strings.WebpartTitlePlaceholder} aria-label={strings.WebpartTitlePlaceholder} defaultValue={this.props.title}></textarea> }
{ !this.props.isEditMode && <span className={styles["view"]}>{this.props.title}</span> }
</div>
{ errorMessage ? <p className={ styles.textError }>{errorMessage}</p> : null }
<div className={ styles.conversationsArea }>
{
channelTopics.map((topic: IChannelTopic, indexTopic) => {
return (
this.renderMessageBlock( topic.message, indexTopic),
topicReplies.filter(r => r.topicMessageId === topic.id).map((reply: ITopicReply, indexReply) => {
return (
this.renderMessageBlock(reply.message, indexReply, true)
)
})
)
})
}
</div>
</div>
</div>
);
}
public renderMessageBlock(message: IChannelMessage, index: Number, isReply: boolean = false) {
const replyStyle = isReply? '' : styles.messageReply;
const messageBlockClasses = `${styles.messageBlock} ${replyStyle}`;
return (
<div className={ messageBlockClasses} key={`teams-message-${message.id}-${index}`}>
<div className={ styles.messageHeader}>
<span className={ styles.messageAuthor }>
{ message.fromUserDisplayName ? message.fromUserDisplayName : strings.UnknownAccount }
</span>
<span className={ styles.messageDate }>
{ this.renderDate(message.createdDateTime) }
</span>
</div>
<div className={ styles.messageBody }>
{ message.deletedDateTime === null ? (message.contentType === 'html' ? renderHTML(message.content) : message.content) : this.renderDate(message.deletedDateTime) }
</div>
</div>
);
}
public renderDate(date: Date) {
return (
<div className={ styles.inlineBlock }>
<Moment format="d.M.yyyy">{date}</Moment> <Moment format="HH:mm:ss">{date}</Moment>
</div>
);
}
When I remove the 2nd .map() block + the comma right before, this one:
,
topicReplies.filter(r => r.topicMessageId === topic.id).map((reply: ITopicReply, indexReply) => {
return (
this.renderMessageBlock(reply.message, indexReply, true)
)
})
I get the first level messages, but I cannot get both to work. I haven't found yet a good example how this must be structured so that it works.
What do I need to change?

<div className={styles.conversationsArea}>
{/* The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand **/
channelTopics.map((topic: IChannelTopic, indexTopic) => {
return [
this.renderMessageBlock(topic.message, indexTopic),
topicReplies
.filter((r) => r.topicMessageId === topic.id)
.map((reply: ITopicReply, indexReply) => {
return this.renderMessageBlock(reply.message, indexReply, true);
})
]
})}
</div>

DevExpress Reactive Get all filters when you use custom filters

I want get all filters for the GridExport but when i use onFiltersChange my filter is deselect, but when I delete onFiltersChange it's work properly.
I use hook useState for setFilters ans filters.
I use this version in my package.json:
"#devexpress/dx-react-chart": "^2.6.4",
"react": "^16.13.1",
How can I do this ?
This is my grid:
<Grid
rows={items}
columns={columns}>
<StockQuantityTypeProvider for={["stockQuantity"]}/>
<DateTypeProvider for={["lastCountingPeriodUpdate"]}/>
<SearchState/>
<SortingState sorting={sorting} onSortingChange={setSorting}/>
<FilteringState filters={filters} onFiltersChange={setFilters}/>
<PagingState defaultPageSize={20}/>
<SelectionState selection={itemsSelectedIndex} onSelectionChange={onChangeSelection}/>
<IntegratedSorting/>
<IntegratedFiltering/>
<IntegratedPaging/>
<IntegratedSelection/>
<Table
messages={{noData: "Aucun article"}}
rowComponent={tableRow}
/>
{currentUser?.authorization?.hasWriteRights && <TableSelection showSelectAll/>}
<Toolbar/>
<SearchPanel messages={{searchPlaceholder: "Rechercher..."}}/>
<CustomToolbarMarkup onClickRefresh={onClickRefresh}>
<CustomToolbarButton/>
</CustomToolbarMarkup>
<TableColumnResizing/>
<TableHeaderRow showSortingControls/>
<TableFilterRow
showFilterSelector
cellComponent={(props) =>
<CustomFilterCell {...props} rows={items} columns={[
{columnName: "baseUnitOfMeasure", type: "selection"},
{columnName: "lastCountingPeriodUpdate", type: "dateRange"},
]}/>
}
/>
<PagingPanel pageSizes={[20, 40, 60]}/>
<ExportPanel startExport={startExport}/>
</Grid>
<GridExporter
ref={exporterRef}
columns={columns}
rows={items}
sorting={sorting}
filters={filters}
selection={itemsSelectedIndex}
onSave={onSave}
/>
And this is my custom filter:
const SelectionFilterCell = ({filter, onFilter, rows, property}) => {
const saveUnitOfMeasure = Array.from(new Set(rows.map((row) => row[property])));
return (
<th style={{fontWeight: "normal"}}>
<Input
type={"select"}
className="form-control stock-propertyTab-inputSelect"
value={filter ? filter.value : ""}
onChange={(e) => onFilter(e.target.value ? {value: e.target.value, operation: "equal"} : null)}>
<option key={-1} value="">
Filtrer...
</option>
{
// eslint-disable-next-line
saveUnitOfMeasure.map((unit, index) => {
if (unit !== null && unit !== "") {
return (
<option key={index} value={unit}>
{unit}
</option>
);
}
})
}
</Input>
</th>
);
};
export const CustomFilterCell = (props) => {
const {column,rows,columns}=props;
let isCustom = false;
let propertyUse = undefined;
columns.forEach((c) => {
if (!isCustom) {
if (column.name === c.columnName) {
isCustom = true;
propertyUse = c;
}
}
});
if (isCustom && propertyUse !== undefined) {
if (propertyUse.type === "selection") {
return <SelectionFilterCell {...props} content={rows} property={propertyUse.columnName} />;
}
}
return <TableFilterRow.Cell {...props} />;
};