Category: javascript

I have no idea what the best route is. I need to create a quote slideshow with 3 quotes that change one at a time every 10 seconds. I will attach my HTML and CSS. Thanks!

<div id="quotediv">
            <br><h1>Happy Clients Say...</h1></br>
            <div id="quoteone">
                <q>"This is the most fun I have ever had playing a 
                learning game. I'm so much smarter now.</q>
                <p> - James H. </p>
            </div>
            <div id="quotetwo">
                <q>"I used to think Math wasn't the coolest thing ever. Now I do!</q>
                <p> - Ted B. </p>
            </div>
            <div id="quotethree">
                <q>"Before playing the anagram game people use to make fun of me. 
                    Now I'm the smartest kid on the block.</q>
                <p> -Jenny J. </p>
            </div>
    </div>

/*CSS created to try an if-else if-else function in JS w/ no luck. Was trying to toggle displays*/

    #quotediv {
    margin: auto;
    }

    #quoteone {
    padding: 80px;
    margin: 20px;
    text-align: center;
    display: block;  
    }

    #quotetwo, #quotethree {
    padding: 80px;
    margin: 20px;
    text-align: center;
    display: none;
    }

al crear el archivo de rutas no me reconoce esta parte path: ‘home’, pathMatch:’full’,
component: WebContentComponent,
children: [

const routes: Routes = [ // { path: 'home', pathMatch:'full', component: WebContentComponent }, { path: 'home', pathMatch:'full', component: WebContentComponent, children: [ { path: '', component: HomeContentComponent, }, { path: 'event', component: EventContentComponent, }, { path: 'forum', component: ForumContentComponent, }, { path: 'campaign', component: CampaignContentComponent, } ], }, // { path: '**', redirectTo: 'home' }, ];

me di cuenta que era eso porque quite eso y los deje solo con el path y el component y funciona

I created an app with ESRI ArcGIS Web App Builder. Now I want to ask the user if he wants to leave the page any time he clicks the forward or back button of the browser or if he refreshes the page.

I tested a couple of solutions but none works properly.

Solution One

add the following in the index.html found in the root folder of the app, right after all the other js scripts imports – I add it right above the </body> tag

<script type="text/javascript" src="init.js"></script> 
<script type="text/javascript" src="setLeavingConfirm.js"></script>   
</body>

then, inside the setLeavingConfirm.js I have the following

 (function setCOnfirm() {
    window.addEventListener('beforeunload', function(e) {
        e.preventDefault()
        return 'Are you sure you want to leave? Changes will not be saved';
    }, {capture:true});//



  window.addEventListener('popstate', function(event) { 
      event.preventDefault()
      let r = confirm("Leave site? Changes you made may not be saved"); 
      if (r == true) { 
          history.back(); 
      } else { 
          history.pushState(null, null, window.location.pathname);
      }
      history.pushState(null, null, window.location.pathname);
  }, false );

})();

Solution Two

In the root folder of the app and then in jimu.js folder, there is the main.js file.

Inside that file, at the top of the initApp() function I add

  on(window, 'beforeunload', function(e){        
    e.preventDefault()
    return 'Are you sure you want to leave? Changes will not be saved';
  }, {capture:true});


  window.addEventListener('popstate', function(event) { 
      event.preventDefault()
      let r = confirm("Leave site? Changes you made may not be saved"); 
      if (r == true) { 
          history.back(); 
      } else { 
          history.pushState(null, null, window.location.pathname);
      }
      history.pushState(null, null, window.location.pathname);
  }, false );

This is based on the on event of dojo.

As I said, both kind of work. For them to work I have to first hit Control + Shift + R in my keyboard to delete cache. Otherwise I can leave the page without being asked first.

How can I fix either, so I get asked before leaving the page

I’m using swiper and try to do next:
I need to create Slider with Swipe with 7 slides splitted to 3 slides per view, when user reach to the last group of 3 – currently it contains my last 7th slide and 2 blank slides.

I want to replace that 2 blank slides to my first 2 items in list.
Current state:
Group 1: 1st — 2nd — 3rd slides
Group 2: 4th- 5th – 6th
Group 3: 7th – 8blank – 9blank

Desired state:
Group 1: 1st — 2nd — 3rd slides
Group 2: 4th- 5th – 6th
Group 3: 7th – 1st – 2nd

Afte that, when user click next navigation or click on first group dot, it should scroll to first item ( to the left in this case)

Any suggestions?

My current code is next. I tried to remove either make width of blank slides to 0, but than whole slider brokes as slides disordered.

<Swiper
        slidesPerView={3.2}
        slidesPerGroup={3}
        spaceBetween={10}
        navigation
        pagination={{
            clickable: true,
        }}
        modules={[Pagination, Virtual, Navigation]}
        className="mySwiper"
        loop
        lazyPreloadPrevNext={6}
        loopAddBlankSlides
        rewind
    >
        <SideButton />
        <SwiperSlide virtualIndex={1}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://sketch-cdn.imgix.net/assets/blog/what-is-a-mockup-header%402x.png?ixlib=rb-4.1.0&fit=crop&dpr=2&w=1200&h=512&q=100&fm=jpg&auto=format&s=ab6b6be50b91ab268c23e93b87b01099"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={2}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://img.freepik.com/free-photo/blank-catalog-magazines-book-mock-up-blue-background_1232-4969.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={3}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://www.thespruce.com/thmb/tQTXXAawXujxURFWEQ0JqzpF_nQ=/4288x0/filters:no_upscale():max_bytes(150000):strip_icc()/mock-orange-shrubs-2132723_02-1a827066a4e44cd684cbc9d0c4477f3e.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={4}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://nordicapis.com/wp-content/uploads/10-Tools-To-Mock-HTTP-Requests-1.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={5}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://elearningindustry.com/wp-content/uploads/2017/12/5-advantages-of-online-mock-tests-1.png"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={6}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2d5CNIOkRc7g2aS4zW2wS4NEP-8DaSWsQFg&usqp=CAU"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={6}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://img.freepik.com/free-psd/four-vertical-business-card-mock-up_1389-12.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
    </Swiper>

Will appreciate any suggestion!

I have a requirement where user wants to have a search text bar. Any text searched should list all the places the searched text is present on all the web pages of the website. When user clicks on any of the places, it should directly open that tab or page and highlight the text.
For Example:

enter image description here

This should list all the places Name is present on the website and when clicked on any search it should take to the page on which it is present.

I have found some thing related on a chrome extension.

https://chrome.google.com/webstore/detail/achjncdillalojkjfjemfmcfcibohpdl

I’m encountering an issue with a JavaScript AJAX request where I need to retrieve data from an API. My goal is to render this data in the HTML DOM for better compatibility with Google SEO crawler and similar tools.

I am exploring alternative methods aside from Server-Side Rendering (SSR). Could you please provide guidance on how to achieve this? Your assistance in resolving this matter is highly appreciated.

Im having an issue when implementing CSP for styles and script on an existing laravel 6 project,

i’ve manged to follow a with one of the guidance to name:

spatie/laravel-csp

content-security-policy.com

However, using default header values like ‘self’ and my localhost domain did not solve the SCP issue and it keeps breaking my site unless i add style unsafe-inline, src unsafe-inline and unsafe-eval due to lot of inline style and script.

The code im using here is:

$this->addDirective(Directive::BASE, Keyword::SELF)
     ->addDirective(Directive::CONNECT, Keyword::SELF)
     ->addDirective(Directive::DEFAULT, Keyword::SELF)
     ->addDirective(Directive::FORM_ACTION, Keyword::SELF)
     ->addDirective(Directive::IMG, Keyword::SELF)
     ->addDirective(Directive::MEDIA, Keyword::SELF)
     ->addDirective(Directive::OBJECT, Keyword::NONE)
     ->addDirective(Directive::STYLE, [
                Keyword::SELF,
                'mylocaldomain.test',
             //'unsafe-inline' //Not safe i know. Without this, site breaks
      ])                
     ->addDirective(Directive::SCRIPT, [
                    Keyword::SELF,
                    'mylocaldomain.test',                         
                 // 'unsafe-eval', //Not safe, finding a way to fix this
                ])
     ->addNonceForDirective(Directive::SCRIPT);
  // ->addNonceForDirective(Directive::STYLE);//produced more errors, commented.

But i am aware that unsafe values are not supposed to be implemented, and indeed, when i run owasp zap against my laravel app, unsafe values are reported right away.

Currently i managed to get csp_nonce() function to pass through script, and now it does not complain, but doing thesame for style was not success due to many inline style and other js libraries calling eval().

Despite on my side already including “nonce” and “self” and “domain name”, my site is still gets broken and complains of inline style (without telling which line).

Some inline style already included nonce parameter, but it still complains.

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

I’ve read many other forums and advises on Stackoverflow as i implement fixes whenever i find (trial and error)

Of course, using “unsafe-inline” value is out of the question, but what is the best practice to address eval() and inline styles with shortest time possible? (im having hundreds of pages with different blades, not sure if its logical to address them 1 by 1)

i have implementing nonce on all scripts that I am loading (does not give me proper location on the error to solve), but it still complains about eval(), and it does not providing me on error location

Content-Security-Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).
Source: window.__cmp&&typeof __cmp("getCMPData")… login

I’ve also tried removing style-src assuming that it may not be a threat like a script, but pages produces more errors on default-src (which was never complained before)

i’ve been working on this for about 2 weeks with no specific lead due to different devs having different issue to resolve the following:

• eval()
• Inline styles

Appreciate if any kind advise on where did i do wrong and how can i go about it, as i am out of options right now.

I have this routing logic in my app.js file

import { Outlet, Route, Routes } from 'react-router-dom'
import './App.css'
//componenet imported


const Client = () => {
  return (
    <React.Fragment>
      <Navbar />
      <Outlet />
      <Footer />
    </React.Fragment>
  )
}


const Admin = () => {
  return (
    <React.Fragment>
    <AdminNav />
      <Outlet />
    </React.Fragment>
  )
}


function App() {

  return (
    <>
      
      <Routes>
        <Route path='/' element={<Client />}>
          <Route index element={<Assessment />} />
          <Route path='/report' element={<AssessmentReport />} />
        </Route>
       <Route path='/' element={<Admin />}>
          <Route path='/admin-list' element={<AdminList />} />
          <Route path='/work-styles/:id' element={<WorkStyleGraph />} />
       </Route>
      </Routes>
    </>
  )
}

export default App

the routes are working fine before built. but after built when I open the index file in browser and then type any url like /admin-list in url bar, is says page not found. however on clicking the links to the specific route I am able to get to that specific page.

I am optimizing out frontend with heavy technical debt (jQuery, Bootstrap 3… I know, not up to me) and now comes the turn of tooltips. This page in particular has several hundred elements using tooltips which are initialized the usual way:

$('[data-toggle="tooltip"]').tooltip()

This of course targets individual elements resulting in hundreds of listeners being attached and contributing negatively to performance.

I am using a mix of the selector option to attach tooltips to a single common parent and this technique to be able to initialize tooltips to that same parent multiple times (i.e. tooltips being initialized in different parts of the code with different options):

/**
 * Attaches a tooltip to the given jQuery element using event delegation. This technique allows attaching
 * multiple tooltips to the same element with different selectors.
 * @param {jQuery} $el - The jQuery element to attach the tooltip listeners to.
 * @param {Object} options - Bootstrap tooltip options.
 * @returns {jQuery} The jQuery object for chaining.
 */
function attachTooltip($el, options = {}) {
    const defaultOptions = {
        title: function () {
            return $(this).attr('title') || $(this).data('title') || '';
        }
    };
    return new $.fn.tooltip.Constructor($el, {...defaultOptions, ...options});
}

I thought this would be good enough (until being able to modernize our code, of couse) but upon inspecting targeted elements with the browser tools, I found out the related event listeners (focusin, focusout, mouseout, mouseover) are still being attached to each individual element matching the selector.

attachTooltip($('body'), {
    selector: '.ttooltip'
});

I would have expected 4 listeners attached to body and Bootstrap to handle the selector matching internally, instead of falling back to individual even listeners.

Any insights? Did I get it wrong, or this is by design? Do up-to-date Bootstrap versions handle it as I would expect? Can I hack in the expected behavior somehow, maybe even wrapping a different tooltip library that does behave this way?

I am trying to swap the selected/checked items from one table group to another table group by using jquery based on the selections. Designed two selection group of tables. When user checks the items and clicks on the button, the selected/checked item needs to move to another group. I tried with Jquery by using the foreach loop on the click of buttons. But the entire table is getting removed.

My code as follows:

function Swapselections(args) {

  if (args.textContent == '>>') {
    alert('>>');

    var template = $('#tblgroup1').html();
    $("#tblgroup1").remove();
    $("#tblgroup2").append(template);
  } else if (args.textContent == '>') {
    alert('>');
  } else if (args.textContent == '<') {
    alert('<');
  } else if (args.textContent == '<<') {
    alert('<<');


    var template = $('#tblgroup2').html();
    $("#tblgroup2").remove();
    $("#tblgroup1").append(template);

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form" class="row" style="">
  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>Group Name</legend>
      Field Name: <input id="txtsearch" placeholder="Filter" name="vehicle1" value="">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden; ">
        <table id="tblgroup1">
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle2" value="Bike1"></td>
            <td><label for="vehicle1">Abc</label></td>
          </tr>

          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle3" value="Bike2"></td>
            <td><label for="vehicle1">Def</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle4" value="Bike3"></td>
            <td><label for="vehicle1">Ghi</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle5" value="Bike4"></td>
            <td><label for="vehicle1">Jkl</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle6" value="Bike5"></td>
            <td><label for="vehicle1">Mno</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle7" value="Bike6"></td>
            <td><label for="vehicle1">Pqr</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle8" value="Bike7"></td>
            <td><label for="vehicle1">Stu</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle9" value="Bike8"></td>
            <td><label for="vehicle1">vwx</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle10" value="Bike9"></td>
            <td><label for="vehicle1">Yz</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle11" value="Bike10"></td>
            <td><label for="vehicle1">AAA</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle12" value="Bike11"></td>
            <td><label for="vehicle1">BBB</label></td>
          </tr>
        </table>
      </div>
    </fieldset>
  </div>

  <div id="dvswapbtns" class="col-2 btn-group-vertical dvswapbtns">
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)">>></button> <br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)">></button> <br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)"><</button><br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)"><<</button><br />
  </div>
  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>Group Name</legend>
      Field Name: <input id="txtsearch2" placeholder="Filter" name="vehicle2" value="">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden; ">
        <table id="tblgroup2">
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle13" value="Bike12"></td>
            <td><label for="vehicle1">CCC</label></td>
          </tr>

          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle14" value="Bike13"></td>
            <td><label for="vehicle1">DDD</label></td>
          </tr>

        </table>
      </div>
    </fieldset>
  </div>

</div>

I would like to add HTML tags and classes to a string before it is displayed on the page.
The library allows the use of Callback Methods, like beforeString and afterString however I am finding it complicated to implement this function. I have tried several methods but can’t find a solution.

I’m using a simple library called TypeIT

I leave here the Javascript code but i add to a link to JsFiddle to test it.

// Expected output result (html tag showed)
//----------------------------------------------
// <span class="">String 1</span>         // already deleted "active" class afterString
// <span class="">String 2</span>
// <span class="active">String 3</span>   // current string added "active" class, beforeString
// and so on

// Variables
//------------------
let counter = 0

// Initialization TypeIt
//------------------
const instance = new TypeIt("#element", {
    strings: [
    'String 1',
    //'String 2',
    '<span class="active">String 2</span>',
    'String 3',
    'String 4',
    'String 5',
    //'String 6',
    '<span class="past">String 6</span>',
    'String 7',
    'String 8',
    'String 9',
    ],
    speed: 150,              // Speed text 
  breakLines: true,          // Break the lines
  html: true,                // Use Html Tags
  
  // Callback Methods
  //------------------
  beforeString: async (TypeIt) => {
    ++counter;
    console.log('Start ' + counter + ' string.');
    // Here should be added: <span class="active">.....</span>
  },
  afterString: async (TypeIt) => {
    console.log('End '+ counter + ' string.');
    console.log('-----------------------')
    // Here should be replaced: "active" with "past" class.
  },
});

instance.go();

I am trying to upload a file to AWS S3 (using a presigned POST URL with no conditions) from Wix platform. The code I use is below. I get successful response from the JS but I see only 15B in AWS S3 and the content should be an image but is actually text. I am starting to feel like I have to send binary data as I upload the file but not sure. This is why I wanted to check if the code is valid. Can you help me with this?

async function uploadFile(file) {
    let presignedData = await fetchPresignedData()
    console.log(presignedData)
    let formData = new FormData();
    
    Object.entries(presignedData.fields).forEach(([key, value]) => {
        formData.append(key, value);
    });
    formData.append('file', file); // file is a File object that has attributes name, size, valid and validation_message

    formData.forEach((value, key) => {
        console.log(`${key}: ${value}`);
    });

    // Use fetch to perform the file upload
    await fetch(presignedData.url, {
            method: 'POST',
            body: formData,
    })
};

Tested adding Content-Type as header and as part of FormData but I either get Bad request or Forbidden.
Upload works using Python locally.

I’ve setup some offline capabilities with vitePWA on my react PWA.

I’ve got a bunch of details ( /details/:id ) pages which I want to be accessed offline.

If I visit thoses pages at least once, the service worker will catch the api call of the details and all differents asset that the page needs…

Here is my vitePWA conf and sw.js :

VitePWA({
      strategies: 'injectManifest',
      injectManifest: {
        globPatterns: ['**/*.{js,jsx,css,html,png,svg,woff2,ico,json,webp}'],
      },
      devOptions: {
        enabled: false,
        type: 'module',
        // Include index.html in __WB_MANIFEST in development
        navigateFallback: 'index.html',
      },
      manifest: {
       ...
      }

sw.js :

import { clientsClaim } from 'workbox-core';
import { NavigationRoute, registerRoute } from 'workbox-routing';
import {
  cleanupOutdatedCaches,
  createHandlerBoundToURL,
  precacheAndRoute,
} from 'workbox-precaching';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Register precached routes (static cache)
precacheAndRoute(self.__WB_MANIFEST || []);

// Clean prievous cache with different "version"
cleanupOutdatedCaches();

// Install directly the sw
self.skipWaiting();

// Makes the sw to control already open tabs of the website !
clientsClaim();

// Cache other routes than index :
// This assumes /index.html has been precached (by precacheAndRoute).
const handler = createHandlerBoundToURL('/index.html');
const navigationRoutes = new NavigationRoute(handler, {
  allowlist: [new RegExp('/details/')],
  denylist: [new RegExp('/edit')],
});
registerRoute(navigationRoutes);

// Cache server calls (StaleWhileRevalidate)
registerRoute(
  ({ url, sameOrigin }) => url.pathname.match(/^/api/canOffLine//),
  new StaleWhileRevalidate({
    cacheName: 'api-offline',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 31536000,
      }),
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
  'GET'
);

But how can I trigger ( with a button click ? ) the saving of all the differents pages details locally ?

I’ve tried to open all the differents pages once in a pop-up windows with a specific search param to “auto-close” them but it seems very hacky !

ugly “solution” :

allDetailsIds.forEach((id) =>
  window.open(`http://mywebsite/details/${id}?autoClose=true`, '_blank', 'popup=1')
);

// And on the main page : 
const [params] = useSearchParams();

useEffect(() => {
  if (params.get('autoClose') === 'true') {
      setTimeout(() => {
        window.close();
      }, 400);
  }
}, []);

Is there a proper way ?

enum Stage {
  STARTED = 1,
  COMPLETED
}

const SystemState = {
  Stage,
}

Is it possible to create a type by extracting the enum from the SystemState object i.e.

type stageType -> 1 | 2 (corresponds to the integral values of the Stage enum)

I’ve tried keyof typeof SystemState['Stage'] but this creates a string union type instead: "STARTED" | "COMPLETED".

I have defined a primereact datatable which takes nested data which is managed from a state:

The data:

{
  id: <some_id>,
  text: {
    en: <english_text>,
    de: <german_text>
  }
}

The Editor Function:

const TableEditor = () => {

  const data = useSelector(dataState);
  const activeLanguage = useSelector(activeLangState)
  const dispatch = useDispatch();

  function _onChange(e) {
   dispatch(setData(e.newData));
  }
  
  const textEditor = (options) => {
     return <InputTextarea value={options.value} onChange={(e) => options.editorCallback(e.target.value)}/>

  }

  return (
            <DataTable value={data} editMode="row" 
                onRowEditComplete={(e) => _onChange(e)}
                dataKey="id">
                <Column field={`text.${activeLanguage}`} header={"Text"} editor={(options) => textEditor(options)} />
                <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
            </DataTable>
        )
}

The problem with the following is that PrimeReact will flatten my data object on edit and create something like:

{
  id: <some_id>,
  text: {
    en: <english_text>,
    de: <german_text>
  },
  text.en: <english_text>
}

Thus when a rowEdit is done only text.en will be changed and the actual data inside the nested text property will remain unchanged. I tried using the body property of the Column element and not include field at all, but then I cannot access the value that needs to be changed through options inside the textEdtior.

const TableEditor = () => {

  const data = useSelector(dataState);
  const activeLanguage = useSelector(activeLangState)
  const dispatch = useDispatch();

  function _onChange(e) {
   dispatch(setData(e.newData));
  }
  
  const textEditor = (options) => {
     // here options.value will now be empty so one idea would be to directly access rowData
     // but that would make the field uneditable as it is now connected to the state which isn't
     // changed here
     return <InputTextarea value={options.rowData.text[activeLanguage]} onChange={(e) => options.editorCallback(e.target.value)}/>

  }

  const textTemplate = (node) => {
    return <div>{node.text[activeLanguage]}</div>
  }

  return (
            <DataTable value={data} editMode="row" 
                onRowEditComplete={(e) => _onChange(e)}
                dataKey="id">
                <Column header={"Text"} body={textTemplate} editor={(options) => textEditor(options)} />
                <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
            </DataTable>
        )
}

Is there a way to avoid the array flattening and change the nested object instead?