Add new records to array in Portal

JavaScript
1

Welcome

I have a little problem with small application where in big shortcut have a task to add record to string array or object array as long as next record will be display over the DIV width so function transport him to another div. I want make this app elastic event if someone changed dimension of div application will control records.

I figure it out in this way :

  1. create table of objects/strings in useState
  2. render array in div
  3. adding record to array
  4. check actual length of array
  5. if next record go outside array then render him in DIV above
  6. Add new record to new array
  7. Render state through Portal in specific div

I guess I won’t do this in one array caused by Portal. I don’t know maybe would better idea to display actual content of array in div on the begining or after add next record.

So, what Should I modify in this algorythm to run good. If this will be useful I can add source code

2

You should put the source code, and a way to run it. The best way to learn is by coding, reading is good also.

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

I hope this time will be easier to read :slight_smile:


import { createPortal } from 'react-dom';
import { useState } from 'react';
import ReactDOM  from 'react-dom/client';
/*
const listOfShoes = [
    {typeOfShoes : "sandals",
    brand : "Laoke",
    price : "100",
    currency : "punds"}
];*/
var start = 3;
const listOfShoes = ["sandals","sportshoes","boots"];

/*get width of list element in javascript

const statement = 0;

export function RenderArrObject(){
    var [arrOfObjects, setArrOfObjects] = useState(false);
    
    
    /*const statementAction = () => {
        statement = {
            if(arrOfObjects = true){}
        }
        
    }*/

    function addNewRecord(){

        let element = document.getElementById("newValField");
        let elementValue = element.value;
        //console.log(elementValue);
        listOfShoes.push(elementValue);
        setArrOfObjects(true);
        ExposeListOfShoes();
       
        //measureArrayinLive();
    }

function measureArrayinLive(){
        ExposeListOfShoes();
        let wOfArray = listOfShoes.length;
        const listElement = document.getElementById("productList");
        console.log(listElement.clientWidth()); 

        console.log(listElementW);
       
    }
 return(
        <div>
            <form>
                <input label="" placeholder="" name="" id="newValField"></input>
            </form>
            
            <div id="areaForPortal" style={{border: "1px solid black", width: "150px", height: "300px"}}>
            
            </div>
            {/*<button onClick={ () => setArrOfObjects(true)}>Add Record</button>*/}
            <button onClick={addNewRecord}>Add Record</button>
            
            
            {arrOfObjects && createPortal(<ExposeListOfShoes />, areaForPortal)}
            

        </div>
    )
}

export function ExposeListOfShoes(){

    return(
        <ul>
           {listOfShoes.map(content => (
                <li>{content}</li>
           ))}
           {/*listOfShoes.map( content => (
            <li key={content.typeOfShoes} id="productList">
                {content.typeOfShoes}
                {content.brand}
                {content.price}
            </li>
           ))*/}
            </ul>
    )
}

const execute = ReactDOM.createRoot(document.getElementById('root'));
execute.render(<RenderArrObject />);