javascript – Page 4562 – Blancer.com Tutorials and projects

embed chat script in Angular

I have a javascript script that inserts an online chat into my site, my intention is to insert it into my app.component.html but when I insert it directly there, it is not displayed.

Is there an option to import my script and have it embedded inside a tag?

at the moment:

<router-outlet></router-outlet>

//not work
<script>
    //script code
</script>

in my index.html it works fine, but here I have a problem since it doesn’t display well in android and therefore I need to embed it in the app.component.html

<body>
      <script>
          //script code....  
      </script>
    <app-root></app-root>
</body>

i want:

<router-outlet></router-outlet>

<div id="widgetItem"></div> //insert my script from app.component.ts

Is there a mechanism to embed my script in that tag? or embed it after the ?

How can I animate a div element in an ellipse shape along a specified SVG path using HTML, CSS, and JavaScript?

I am trying to animate a div element in the shape of an ellipse, following a specified SVG path. I have the SVG path defined, and I want to smoothly move the div element along that path. What is the best approach to achieve this effect using HTML, CSS, and JavaScript?

<section class="mission-statement">
  <svg class="vector" xmlns="http://www.w3.org/2000/svg" width="1650" height="721" viewBox=" 0 0 1650 821"><g clip-path="url(#a)"><path id="motionPath" stroke="#fff" stroke-linecap="round" stroke-opacity=".6" stroke-width="1.5" d="M1728 410.5c-264.11 443.383-336.42 443.383-125.14 0 164.7-247.83 138.29-247.83-79.23 0-264.11 247.83-290.52 247.83-79.23 0 202.21-226.532 175.8-226.532-79.23 0-264.11 226.532-290.52 226.532-79.24 0 330.48-482.106 304.07-482.106-79.23 0-264.108 482.106-290.519 482.106-79.23 0 222.74-534.383 196.33-534.383-79.23 0-264.113 534.383-290.524 534.383-79.237 0 167.267-311.723 140.857-311.723-79.232 0-264.109 311.723-290.52 311.723-79.233 0 223.752-348.51 197.342-348.51-79.233 0-264.108 348.511-290.519 348.511-79.232 0C897.4-50.309 870.99-50.309 572.84 410.5c-264.108 460.809-290.519 460.809-79.232 0 213.506-470.49 187.095-470.49-79.233 0-264.108 470.489-290.519 470.489-79.232 0 228.242-546 201.831-546-79.233 0-264.108 546-290.52 546-79.233 0C365.112-17.394 241.257-17.394 0 410.5"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1728v821H0z"/></clipPath></defs></svg>
  <div class="ellipse"></div>
</section>

I want the div with the id “ellipse” to move along the path automatically back and forth continously defined by the SVG path element with the id “motionPath”. How can I accomplish this animation? Are there any JavaScript libraries or techniques that could help me achieve this effect?

Any help or guidance would be greatly appreciated. Thank you in advance!

How to download & save files from the assets folder of React Native Expo app to a physical device?

Actually, I add some images to the assets folder of my React Native Expo app. I want that when a user opens my app, they can download or save these images on their physical device. I have tried many times, but I haven’t found a solution. I tried the below code which works fine on the Expo Go app, but when I install the APK and open the app, it doesn’t download the images. Can you please suggest a solution for this?

I have tried this, it’s working on the expo go app but not on physical devices.

import React from 'react';
import {View, Text, Button, Image} from 'react-native'
import * as MediaLibrary from 'expo-media-library';
import {Asset} from 'expo-asset';
import { useRoute } from '@react-navigation/native';

const Test = () => {

  //Example Image Url = require('../assets/nk/myimage.jpg')
  const route = useRoute(); 
  const saveFileToMediaLibrary = async () => {
    try {
      const asset = Asset.fromModule(route.params.u);
      // Download the asset to the local file system
      await asset.downloadAsync();
      // Get the local URI of the downloaded file
      const fileUri = asset.localUri;
    // File saved successfully
      console.log('File saved to media library:', fileUri);
      
      // Save the file to the media library
      const perm = await MediaLibrary.requestPermissionsAsync();
        if (perm.status != "granted") {
          return;
        }

        try {
          const asset = await MediaLibrary.createAssetAsync(fileUri);
          console.log(asset);
          const album = await MediaLibrary.getAlbumAsync("My App Images");
          if (album == null) {
            await MediaLibrary.createAlbumAsync("My App Images", asset, false);
          } else {
            await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
          }
        } catch (e) {
          alert("Something Went Wrong..."+ e);
        }
    } catch (error) {
      alert('Error to save file in media library', fileUri);
    }
  };

  return (
    <View>
      <Button title="Download File" onPress={()=>{saveFileToMediaLibrary()}} />
      <Image 
      source={route.params.u} style={{width:100,height:100}}
      />
    </View>
  );
};
export default Test;

Stop animation function when mouse over

I am using HTML and JS To achieve automatic smooth scrolling with a loop through all child divs within a parent div.

i need when mouse over, stop animation

here is code:

function animatethis(targetElement, speed) {

var width = 5400;

$(targetElement).animate({ marginLeft: "-="+width},
{
    duration: speed,
    complete: function ()
    {
        targetElement.animate({ marginLeft: "+="+width },
        {
            duration: speed,
            complete: function ()
            {
                animatethis(targetElement, speed);
            }
        });
    }
});
};
animatethis($('#gallery-horizontal-scroll-inner'), 30000);

replace space with plus sign but remove end space

I’m not very familiar with regex things, and came up to replace any space with + sign but if string has some space at end.. I want to remove them. so this is my try:

let str = "blah blah blah   ";
let res = str.replace(/s+/g, '+');
console.log(res);

but the result I have looking for is:

blah+blah+blah

but this little code give me this:

blah+blah+blah+

React button calling async method gets exception even though its run

I have a React component with this button in it. The purpose is to update an array inside my user state variable called favourites, which is just an array of integers, and props.item.id will either be added to it if favourites doesnt contain it or removed from it if favourites contains it. favButtonEnabled is a state variable thats just true/false to disable the button while the async call is going.

The button:

<button
          className="favouriteStar"
          onClick={async () => {
            setFavButtonEnabled(true);
            await toggleUserFavourite(user, setUser, props.item.id);
            setFavButtonEnabled(false);
          }}
          disabled={favButtonEnabled}
        >
          ★
        </button>

toggleUserFavourite is where an unpredictable behaviour occurs. Sometimes the app crashes because userState.favourites.includes is not a function and sometimes it doesn’t. What makes it even more strange is that sometimes even though this crash happens, the json-server is still updated with the new array meaning that the method updateUser was executed. But even that sometimes doesnt happen and the json-server just seems to randomly either update or not update.

async function updateUser(userState){
    await fetch(`http://localhost:2001/users/${userState.id}`,{
        method: "PATCH",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(userState)
})
}

export async function toggleUserFavourite(userState, userStateSetter, id){     
    if(userState.favourites.includes(id)){
        const newUserFavs = userState.favourites.filter(elem => elem !== id)
        userStateSetter((prevState) => ({
            ...prevState,
            favourites: newUserFavs
        }))
    }
    else{
        const newUserFavs = userState.favourites.push(id)
        userStateSetter((prevState) => ({
            ...prevState,
            favourites: newUserFavs
        }))
    }
    await updateUser(userState);
}

I even tried adding a try/catch clause to toggleUserFavourite like this to eat the error and print it to the console instead but it still crashes the entire app while confusingly still updating the json-server sometimes.

export async function toggleUserFavourite(userState, userStateSetter, id){
    try {
        userState.favourites.includes(id)  
    } catch (error) {
        console.warn(error)
        return
    }
    
    if(userState.favourites.includes(id)){
        const newUserFavs = userState.favourites.filter(elem => elem !== id)
        userStateSetter((prevState) => ({
            ...prevState,
            favourites: newUserFavs
        }))
    }
    else{
        const newUserFavs = userState.favourites.push(id)
        userStateSetter((prevState) => ({
            ...prevState,
            favourites: newUserFavs
        }))
    }
    await updateUser(userState);
}

EDIT: I noticed the crashing only occurs when i try to add a favourite that doesnt exist. The exception is allways thrown, but the json-server is also updated to contain the new id. Console logging both userState and userState.favourites logs exactly what i expect from them so includes should be a function?

Chakra UI _blur styles from theme

I’m applying custom theme to an Input component in ChakraUI.
Here I’m using _focus pseudo class in the baseStyle –> field section.

My question is do we have something like _blur ?
What should I do to handle focusOut ?

const baseStyle = definePartsStyle({
  field: {
    _placeholder: {
      opacity: 0.5,
    },
    _focus: {
      borderColor: #fff',
    },
  },
})

tried searching the chakra docs but didn’t get anything specific to handle focusOutfrom the Theme itself

import.meta.env.PROD runs in development mode

why below code run in the development mode? it should only run in production mode

Here is the running scripts in package.json

“build-watch-dev”: “vite build –mode development –watch”,

import { useStore } from '@/store';
import { register } from 'register-service-worker';

export function registerSW() {
    if (import.meta.env.PROD) {
        register(`${import.meta.env.BASE_URL}service-worker.js`, {
            ready() {
                console.log(
                    'App is being served from cache by a service worker.n' +
                    'For more details, visit 
                )
            },
            registered() {
                console.log('Service worker has been registered.')
            },
            cached() {
                console.log('Content has been cached for offline use.')
            },
            updatefound() {
                console.log('New content is downloading.')
            },
            updated() {
                console.log('New content is available; please refresh.');
                const $store = useStore();
                $store.serviceWorkerUpdate = true;
            },
            offline() {
                console.log('No internet connection found. App is running in offline mode.')
            },
            error(error) {
                const $store = useStore();
                if ($store.isOnline) {
                    console.error('Error during service worker registration:', error)
                }
            }
        })
    }
}

Detect if user has Zoom, or disable Zoom?

Built a web page that the client initially approved, but he later asked for further design changes, as it’s not displaying as he intended.
Well, it turns out, in his operating system, he is zoomed in 150%. i.e. in Windows, Display Settings>Scale and Layout (150%).The Windows X Display Settings menu.

Is there a way, in a web page, to detect if a user has this kind of setting enabled in their OS, and accommodate, or disable the zoom while on the page?

I inserted META tags into the HEAD, and CSS rules into the STYLE tag of the page. They were from here: https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page

Trying to add object to IndexedDb: Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found

I am new to IndexedDb and I am trying to save an object using the example seen here

However, I get the following error when opening a transaction:

Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found.

function saveIntoIndexedDb() {
    const DBOpenRequest = indexedDB.open("toDoList", 4);

    DBOpenRequest.onsuccess = (event) => {
        console.log("Database initialized.");

        // store the result of opening the database in the db variable.
        // This is used a lot below
        db = DBOpenRequest.result;

        // Run the addData() function to add the data to the database
        addData();
    };
}

function addData() {
    // Create a new object ready to insert into the IDB
    const newItem = [
        {
            taskTitle: "Walk dog",
            hours: 19,
            minutes: 30,
            day: 24,
            month: "December",
            year: 2013,
            notified: "no",
        },
    ];

    // open a read/write db transaction, ready for adding the data
    // ERROR OCCURS HERE!!! 
    const transaction = db.transaction(["toDoList"], "readwrite");

    // report on the success of the transaction completing, when everything is done
    transaction.oncomplete = (event) => {
        console.log("Transaction completed.");
    };

    transaction.onerror = (event) => {
        console.log("Transaction not opened due to error. Duplicate items not allowed.");
    };

    // create an object store on the transaction
    const objectStore = transaction.objectStore("toDoList");

    // Make a request to add our newItem object to the object store
    const objectStoreRequest = objectStore.add(newItem[0]);

    objectStoreRequest.onsuccess = (event) => {
        // report the success of our request
        console.log("Request successful.");
    };
}

Safety of using and approach to “floating” promises

In the MDN Docs it explains,

Important: Always return results, otherwise callbacks won’t catch the result of a previous promise (with arrow functions, () => x is short for () => { return x; }). If the previous handler started a promise but did not return it, there’s no way to track its settlement anymore, and the promise is said to be “floating”.

With this little json file:

{
  "ingredients": "flour,sugar,butter,chocolate"
}

const listOfIngredients = [];
console.clear();
function doSomething() {
  fetch('http://127.0.0.1:4000/test.json')
  .then((res) => res.json())
  .then((data) => {
    data.ingredients.split(',').forEach(i => listOfIngredients.push(i)); 
  // doesn't return
  })
  .then((nothing) => {
    console.log(nothing); // undefined, of course
    console.log(listOfIngredients);
    return "and coconut";
  })
  .then((something) => {
    listOfIngredients.push(something);
    console.log(listOfIngredients);
  });
}
doSomething();

Result:

undefined
['flour', 'sugar', 'butter', 'chocolate']
['flour', 'sugar', 'butter', 'chocolate', 'and coconut']

So, I think that the result of the success callback, (data) => {...} is (said to be) “floating”, but that since in this case, the promise returns immediately, the chained (nothing) => {...} and (something) => {...} callbacks succeed.

If I update the (nothing) callback to contain another fetch, that fetch does need to be returned ((nothing) => { return fetch... otherwise we get ['flour', 'sugar', 'butter', 'chocolate', undefined]. Makes sense.

So, in promise chains, do you only need to return from the callbacks for promise objects that handle asynchronous operations?

How to add css animation in js for mobile?

I want to copy some text to clipboard and alert it was copied.

The user clicks/touches the coupon PRIMEIRACOMPRA and it changes “cupom copiado” opacity to 1 and runs an animation to hide it.

Example

I have this script:

function copyCupom() {
  var copyText = document.querySelector(".offer-right__coupon input");
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices
  navigator.clipboard.writeText(copyText.value);
  var textwascopied = document.querySelector(".offer-right__main .alert-coupon");
  textwascopied.style.opacity = "1";
  textwascopied.style.webkitAnimation = "hideText 1s ease-in 2s";
}

this css:

.offer-right__main .alert-coupon {
    opacity: 0;
    animation-fill-mode: forwards !important;
    transition: 1s all;
}

@-webkit-keyframes hideText {
  to {
    opacity: 0;
  }
}

The coupon itself is a button calling the function which works fine on desktop, but mobile does not!

<button onclick="copyCupom()">

What’s missing?

The copied text message “Cupom copiado” does not disappear on mobile, i tried adding a webkit animation with no success.

textwascopied.style.webkitAnimation = "webkit-hideText 1s ease-in 2s";
textwascopied.style.animation = "hideText 1s ease-in 2s";

@-webkit-keyframes webkit-hideText {
  to {
    opacity: 0;
  }
}

@keyframes hideText {
  to {
    opacity: 0;
  }
}

Keep parent hierarchy content when filter deep nested arrays of object using deepdash

I’m trying to filter a deep “complex” nested object array!
Trying to figured out with _.filterDeep().

Initial data :

const products_array = [
    { 
        name: 'Food to Go',
        filter: 'food',
        color: '#f9dd0a',
        categories_list: [
            { 
                name: 'Bepulp Compostable',
                sub_categories: [
                    {
                        name: 'BOWLS & CONTAINERS',
                        products: [
                            {
                                type: 'RECTANGULAR',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PAP46120', 
                                        description: 'Rectangular tray 600ml 16x23 cm', 
                                        capacity: '600ml', 
                                        dimensions: '16x23x3',
                                        packaging: '4x75p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                    {
                                        color: 'natural', 
                                        code: 'PUL46130', 
                                        description: 'Rectangular tray 950ml 16x23 cm', 
                                        capacity: '950ml', 
                                        dimensions: '16x23x3',
                                        packaging: '4x75p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                    {
                                        color: 'clear', 
                                        code: 'PUL51601', 
                                        description: 'rPET lid for rectangular tray 16x23 cm', 
                                        capacity: '', 
                                        dimensions: '16x23x2',
                                        packaging: '4x75p.',
                                        cases: '20',
                                        material: 'rPET',
                                        cc: false,
                                        hot: false
                                    },
                                ]
                            },
                            {
                                type: 'SQUARE',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PUL15012', 
                                        description: 'Square bowl 375ml 13x13 cm', 
                                        capacity: '375ml', 
                                        dimensions: '13x13x5',
                                        packaging: '10x50p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                    {
                                        color: 'natural', 
                                        code: 'PUL15016', 
                                        description: 'Square bowl 500ml 13x13 cm', 
                                        capacity: '500ml', 
                                        dimensions: '13x13x6',
                                        packaging: '10x50p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'GRAB & GO',
                        products: [
                            {
                                type: '',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PUL400606', 
                                        description: 'GRAB & GO square tray 13x13 cm', 
                                        capacity: '', 
                                        dimensions: '13x13x3',
                                        packaging: '5x50p.',
                                        cases: '88',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                ]
                            }
                        ]
                    },
                    {
                        name: 'BOXES TO GO',
                        products: [
                            {
                                type: 'Hamburger box',
                                products_list: [
                                    {
                                        color: 'white', 
                                        code: 'PUL2014N', 
                                        description: 'Hamburger box 800ml 15x15 cm', 
                                        capacity: '800ml', 
                                        dimensions: '15x15x8',
                                        packaging: '12x50p.',
                                        cases: '13',
                                        material: 'PULP',
                                        cc: true,
                                        hot: false
                                    },
                                ]
                            },
                        ]
                    }
                ],
            },
            { 
                name: 'Recyclable Paper',
                sub_categories: [
                    {
                        name: '',
                        products: [
                            {
                                type: 'PAPER CUTLERY',
                                products_list: [
                                    {
                                        color: 'white', 
                                        code: 'PAP3510', 
                                        description: 'Fork', 
                                        capacity: '', 
                                        dimensions: '17',
                                        packaging: '20x50p.',
                                        cases: '70',
                                        material: 'Paper',
                                        cc: true,
                                        hot: false,
                                        isNew: true
                                    },
                                ]
                            },
                            {
                                type: 'SNAP & GO',
                                products_list: [
                                    {
                                        color: 'Kraft', 
                                        code: 'PAP15KSG375', 
                                        description: 'Salad tray 12oz', 
                                        capacity: '375', 
                                        dimensions: '15x12x5',
                                        packaging: '1x400',
                                        cases: '',
                                        material: 'Paper',
                                        cc: false,
                                        hot: false,
                                        isNew: true
                                    },
                                ]
                            },
                        ]
                    },
                ],
            },
        ],
    },
    { 
        name: 'BEVERAGE SOLUTIONS',
        filter: 'beverage',
        color: '#0ad5f9',
        categories_list: [
            { 
                name: '',
                sub_categories: [
                    {
                        name: '',
                        products: [
                            {
                                type: 'Beverage on the Move',
                                products_list: [
                                    {
                                        color: 'Kraft', 
                                        code: 'PAPBOTM2417', 
                                        description: 'Bag-In-Box KRAFT 2,8L / 96 oz', 
                                        capacity: '2800ml', 
                                        dimensions: '24x17x16',
                                        packaging: '10p',
                                        cases: '36',
                                        material: 'Paper/other',
                                        cc: false,
                                        hot: false
                                    }
                                ]
                            },
                        ]
                    },
                ],
            },
        ],
    },

...

]

Expected output :

const products_array = [
    { 
        name: 'Food to Go',
        filter: 'food',
        color: '#f9dd0a',
        categories_list: [
            { 
                name: 'Bepulp Compostable',
                sub_categories: [
                    {
                        name: 'BOWLS & CONTAINERS',
                        products: [
                            {
                                type: 'RECTANGULAR',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PUL46130', 
                                        description: 'Rectangular tray 950ml 16x23 cm', 
                                        capacity: '950ml', 
                                        dimensions: '16x23x3',
                                        packaging: '4x75p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                    {
                                        color: 'clear', 
                                        code: 'PUL51601', 
                                        description: 'rPET lid for rectangular tray 16x23 cm', 
                                        capacity: '', 
                                        dimensions: '16x23x2',
                                        packaging: '4x75p.',
                                        cases: '20',
                                        material: 'rPET',
                                        cc: false,
                                        hot: false
                                    },
                                ]
                            },
                            {
                                type: 'SQUARE',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PUL15012', 
                                        description: 'Square bowl 375ml 13x13 cm', 
                                        capacity: '375ml', 
                                        dimensions: '13x13x5',
                                        packaging: '10x50p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                    {
                                        color: 'natural', 
                                        code: 'PUL15016', 
                                        description: 'Square bowl 500ml 13x13 cm', 
                                        capacity: '500ml', 
                                        dimensions: '13x13x6',
                                        packaging: '10x50p.',
                                        cases: '25',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'GRAB & GO',
                        products: [
                            {
                                type: '',
                                products_list: [
                                    {
                                        color: 'natural', 
                                        code: 'PUL400606', 
                                        description: 'GRAB & GO square tray 13x13 cm', 
                                        capacity: '', 
                                        dimensions: '13x13x3',
                                        packaging: '5x50p.',
                                        cases: '88',
                                        material: 'PULP',
                                        cc: false,
                                        hot: false
                                    },
                                ]
                            }
                        ]
                    },
                    {
                        name: 'BOXES TO GO',
                        products: [
                            {
                                type: 'Hamburger box',
                                products_list: [
                                    {
                                        color: 'white', 
                                        code: 'PUL2014N', 
                                        description: 'Hamburger box 800ml 15x15 cm', 
                                        capacity: '800ml', 
                                        dimensions: '15x15x8',
                                        packaging: '12x50p.',
                                        cases: '13',
                                        material: 'PULP',
                                        cc: true,
                                        hot: false
                                    },
                                ]
                            },
                        ]
                    }
                ],
            },
        ],
    }
]

Current output:

const products_array = [
    { 
        categories_list: [
            { 
                sub_categories: [
                    {
                        products: [
                            {
                                products_list: [
                                    {
                                        code: 'PUL46130', 
                                    },
                                    {
                                        code: 'PUL51601', 
                                    },
                                ]
                            },
                            {
                                products_list: [
                                    {
                                        code: 'PUL15012', 
                                    },
                                    {
                                        code: 'PUL15016', 
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        products: [
                            {
                                products_list: [
                                    {
                                        code: 'PUL400606', 
                                    },
                                ]
                            }
                        ]
                    },
                    {
                        products: [
                            {
                                products_list: [
                                    {
                                        code: 'PUL2014N', 
                                    },
                                ]
                            },
                        ]
                    }
                ],
            },
        ],
    }
]

Actual function :

function arrayFilter(products_array, searchVal = 'PUL') {
let list = _.filterDeep(
      products_array,
      function(value, key) {
        if (key == 'code') {
          return value.indexOf(searchVal) >= 0;
        }
      },
      {
        onTrue: { skipChildren: false },
      }
  );

console.log(list);
}

Technically the function works but the mistake is that the hierarchy and the other object key are removed from the array.

What i try is to keep parent hierarchy if any object still in the child array.

Try and search a lot of different solutions like { childrenPath:'products_list' } -- option to declare children property name, to make deepdash work in ‘tree mode’

Any help is very much appreciated. 🙂

is defined but never used no-unused-var

I’m New to React, and I’m trying to learn about React Component right now. but when I create nameList.js, add data in there, and export to app.js, it does not show anything in the browser. I read some answers in Stackoverflow and tried it. but not show anything.

App.js

import './App.css';
import nameList from './Components/nameList';

function App() {
  return (
    <div className="App">
      <div className="App" >
            <nameList/>
        </div>
    </div>
  );
}

export default App;

nameList.js in Component Folder


import React from 'react';

function nameList() {
    return (
    <div>
       <h1>Name List</h1>
        <ul>
            <li>Stu1</li>
            <li>Stu2</li>
            <li>Stu3</li>
        </ul>
    </div>
  )
}

export default nameList;

I need to get data in nameList.js into App.js

I’m getting “UseState is not a function” error [closed]

I’m trying to create a closing burger menu, which should close whenever I click any of navigation buttons(Main , About us, etc.), however I’m receving an error:

“setClosed is not a function
TypeError: setClosed is not a function”

How can I fix that and what’s the problem?

I would higly appreciate your help!

Here is my code:

const Navigation = () => {
  const navigate = useNavigate();

  const [setClosed, Closed] = useState(false);

  return (
    <header className="navigation">
      <div className="mobile-nav">
        <span className="logo">Logo</span>
        <nav className="nav-links">
          <Link className="nav who" to="about">
            Кто мы
          </Link>
          <Link className="nav link services" to="service">
            Услуги
          </Link>
          <Link className="nav link portfolio" to="portfolio">
            Портфолио
          </Link>
          <Link className="nav link request" to="form">
            Заявка
          </Link>
        </nav>
        <Menu right styles={cross_styles} isOpen={Closed}>
          <div className="separator"></div>
          <div className="menu-tab">
            <Link
              className="menu-item"
              style={{ color: "#1A1A1A" }}
              to="main"
              onClick={() => navigate("/#main")}
            >
              Главная
            </Link>
            <MDBIcon
              fas
              icon="lightbulb"
              size="lg"
              style={{ marginLeft: "16px" }}
            />
          </div>
          <div className="menu-tab">
            <Link
              className="menu-item"
              style={{ color: "#1A1A1A" }}
              to="who"
              onClick={() => setClosed(false)}
            >
              Кто мы
            </Link>
            <MDBIcon
              fas
              icon="users"
              size="lg"
              style={{ marginLeft: "16px" }}
            />
          </div>
          <div className="menu-tab">
            <Link
              className="menu-item"
              style={{ color: "#1A1A1A" }}
              to="services"
              onClick={() => setClosed(false)}
            >
              Услуги
            </Link>
            <MDBIcon
              fas
              icon="briefcase"
              size="lg"
              style={{ marginLeft: "16px" }}
              onClick={() => navigate("/#services")}
            />
          </div>
          <div className="menu-tab">
            <Link
              className="menu-item"
              style={{ color: "#1A1A1A" }}
              to="portfolio"
              onClick={() => setClosed(false)}
            >
              Портфолио
            </Link>
            <MDBIcon
              fas
              icon="palette"
              size="lg"
              style={{ marginLeft: "16px" }}
              onClick={() => navigate("/#portfolio")}
            />
          </div>
          <div className="menu-tab">
            <Link
              className="menu-item"
              style={{ color: "#FF5722" }}
              onClick={() => setClosed(false)}
            >
              Заявка
            </Link>
          </div>
        </Menu>
      </div>