Im trying to find a way that when you try this command:

custprmt: function(pstr, ifbold) {

if(ifbold === '-makebold') {
     localStorage.setItem('myNEWprompt', pstr);
this.set_prompt('[[b;var;]' + pstr +' ')
}

else  {
             localStorage.setItem('myNEWprompt', pstr);
       this.set_prompt(pstr +' ')
       }

},

It will make a custom prompt based off what the user types, and save it to local storage.
Then by using this code:

$(document).ready(function () {
   if (myNEWprompt) {
      set_prompt(myNEWprompt)
       } else {
        set_prompt('guest$ ')
      }
      });

It will load the custom prompt on page load. My issue is that the second set of code isnt loading the prompt that is saved. I feel like it might be because of the set_prompt but im not sure, ive tried this.set_prompt and prompt: but none works. Im not really sure what to do anymore, and I dont know if its even possible, so please help, your assistance will be much appreciated 🙂

I am using flutter_tts and the TtsState enum to check the state of Tts. E.g:

  TtsState ttsState = TtsState.stopped;

However, when I use this, I need to import import ‘package:flutter_tts/flutter_tts_web.dart’;

And then when I run the project I get this error:

Error: Type ‘js.JsObject’ not found.

I have made a custom enum as workaround in the meantime, but interested to know how to actually fix this error which appears related to JavaScript compatability?

I have updated flutter, reinstalled flutter_tts, run flutter clean etc but it hasn’t worked.

I am creating a bookstore app for a school project and am struggling with connecting my html file to my json file. I am trying to create an html file that connects to my json file and allows you to select different courses and view the required books in a separate html file.

courses.html

JSON Data Display

Course Information

async function fetchAndDisplayData() { try { // Fetch data from the JSON file const response = await fetch(‘data/foxbooks.json’); const data = await response.json(); // Display the data on the HTML page displayData(data); } catch (error) { console.error(‘Error fetching data:’, error); } } function displayData(data) { const coursesContainer = document.getElementById(‘courses-container’); data.forEach(course => { const courseDiv = document.createElement(‘div’); courseDiv.innerHTML = `

${course.courseName}

Course Code: ${course.courseCode}

Instructor: ${course.instructor}

---

`; coursesContainer.appendChild(courseDiv); }); } fetchAndDisplayData();

foxbooks.json

{

“courses”: [

{

“courseName”: “Intro to Programming”,

“courseCode”: “CMPT101”,

“instructor”: “George Washington”,

“schedule”: “MWF 10:00 AM – 12:00 PM”,

“building”: “Hancock”,

“location”: “Room 0005”,

“books”: [

{

“bookTitle”: “Introduction to Programming”,

“author”: “Steve Jobs”,

“isbn”: “123456789”,

“publicationYear”: 2022,

“publisher”: “McGraw Hill”,

“edition”: “3”

},

{

“bookTitle”: “Introduction to Python”,

“author”: “Python Johnson”,

“isbn”: “987654321”,

“publicationYear”: 2021,

“publisher”: “Merriam-Webster”,

“edition”: “2”

}

]

},

{

“courseName”: “Modern Latin America”,

“courseCode”: “Hist 274L”,

“instructor”: “George Lopez”,

“schedule”: “MW 9:30 AM – 10:45 AM”,

“building”: “Lowell Thomas”,

“location”: “Room 326”,

“books”: [

{

“bookTitle”: “Latin American History”,

“author”: “Katherine Johnson”,

“isbn”: “348201269”,

“publicationYear”: 2001,

“publisher”: “HarperCollins”,

“edition”: “3”

},

{

“bookTitle”: “Modern Latin America”,

“author”: “Shakira”,

“isbn”: “34591028”,

“publicationYear”: 1985,

“publisher”: “Merriam-Webster”,

“edition”: “8”

}

]

},

{

“courseName”: “Cyroptography”,

“courseCode”: “CMPT436N”,

“instructor”: “Alan Turing”,

“schedule”: “MWF 3:30 PM – 4:45 PM”,

“building”: “Hancock”,

“location”: “Room 0004”,

“books”: [

{

“bookTitle”: “Cryptography for Smart People”,

“author”: “Katherine Johnson”,

“isbn”: “091287347”,

“publicationYear”: 2001,

“publisher”: “HarperCollins”,

“edition”: “3”

},

{

“bookTitle”: “Real-World Cryptography”,

“author”: “David Wong”,

“isbn”: “038749028”,

“publicationYear”: 2003,

“publisher”: “Manning”,

“edition”: “8”

}

]

},

{

“courseName”: “Network Security”,

“courseCode”: “CMPT419N”,

“instructor”: “Barack Obama”,

“schedule”: “T 9:30 AM – 12:45 PM”,

“building”: “Hancock”,

“location”: “Room 0005”,

“books”: [

{

“bookTitle”: “Network Security, Firewalls, and VPNS”,

“author”: “J. Michael Stewart”,

“isbn”: “086938793”,

“publicationYear”: 2006,

“publisher”: “Jones & Barlett”,

“edition”: “3”

},

{

“bookTitle”: “Foundations of Information Security”,

“author”: “Jason Andress”,

“isbn”: “657483902”,

“publicationYear”: 2012,

“publisher”: “McGraw Hill”,

“edition”: “2”

}

]

},

{

“courseName”: “Intro to Criminal Justice”,

“courseCode”: “CRIM101L”,

“instructor”: “Sherlock Holmes”,

“schedule”: “M 11:00 AM – 12:15 PM”,

“building”: “51 Fulton”,

“location”: “Room 128”,

“books”: [

{

“bookTitle”: “The Fear of too Much Justice”,

“author”: “James Kwak”,

“isbn”: “033741840”,

“publicationYear”: 2019,

“publisher”: “HarperCollins”,

“edition”: “2”

},

{

“bookTitle”: “Introduction to Criminal Justice”,

“author”: “Robert M. Bohm”,

“isbn”: “086938793”,

“publicationYear”: 2012,

“publisher”: “Merriam-Webster”,

“edition”: “1”

}

]

},

{

“courseName”: “Italian Crime Fiction”,

“courseCode”: “Lit226L”,

“instructor”: “Stefano Gidari”,

“schedule”: “Th 3:30PM-4:45PM”,

“building”: “Donnelly”,

“location”: “Room 336”,

“books”: [

{

“bookTitle”: “Italian Crime Fiction”,

“author”: “Giuliana Pieri”,

“isbn”: “458023948”,

“publicationYear”: 1998,

“publisher”: “Everand”,

“edition”: “1”

},

{

“bookTitle”: “The Shape of Water”,

“author”: “Andrea Camilleri”,

“isbn”: “086938793”,

“publicationYear”: 2012,

“publisher”: “Penguin Random House”,

“edition”: “1”

}

]

},

{

“courseName”: “History of Architecture”,

“courseCode”: “Art110L”,

“instructor”: “Francesco Rossi”,

“schedule”: “TTh 8:00AM-9:15AM”,

“building”: “Lowell Thomas”,

“location”: “Room 212”,

“books”: [

{

“bookTitle”: “Anatomy of a City”,

“author”: “Kate Ascher”,

“isbn”: “391064902”,

“publicationYear”: 2001,

“publisher”: “Penguin Books”,

“edition”: “3”

},

{

“bookTitle”: “The Art of the Architect”,

“author”: “Michael Imber”,

“isbn”: “302849627”,

“publicationYear”: 1999,

“publisher”: “Triglyph Books”,

“edition”: “4”

}

]

},

{

“courseName”: “Writing for College”,

“courseCode”: “ENG120L”,

“instructor”: “David Smith”,

“schedule”: “MTh 8:00AM-9:15AM”,

“building”: “Library”,

“location”: “Room 245”,

“books”: [

{

“bookTitle”: “English Literature”,

“author”: “Walter Hobbs”,

“isbn”: “593720582”,

“publicationYear”: 2008,

“publisher”: “Norton”,

“edition”: “10”

},

{

“bookTitle”: “Advanced Literature”,

“author”: “Susan Wills”,

“isbn”: “019274827”,

“publicationYear”: 2010,

“publisher”: “McGraw Hill”,

“edition”: “8”

}

]

}

]

}

I’m trying to take a csv file that I have (named travelq.csv), and I’m trying to auto-generate a table from the data. The h1 heading loads but the table does not. I do not know where I went wrong. Hoping one of you lovely human(?) beings can help me out

This is my index file(index.html):

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSV File to Table</title>
        <script src="script.js"></script>
    </head>

    <body>
        <h1>Andrew Long</h1>
        <table id="data-table" border="1">
            <!-- CSV contents will be imported here -->
        </table>
    </body>
</html>

This is my script.js file:
//script.js

document.addEventListener('DOMContentLoaded', function () {
    fetch('/travel')
        .then(response => response.json())
        .then(data => {
            console.log('Data Received:', data);
            const table = document.getElementById('data-table');

            //Adds Headers
            const header = table.createTHead();
            const headerRow = header.insertRow(0);
            Object.keys(data[0]).forEach(key => {
                const th = document.createElement('th');
                th.innerText = key;
                headerRow.appendChild(th);
            });

            //Adds Data to Table
            data.forEach(item => {
                const row = table.insertRow(-1);
                Object.values(item).forEach(value => {
                    const cell = row.insertCell();
                    cell.innerText = value;
                });
            });
        })
        .catch(error => console.error('Error fetching data: ', error));
})

This is my server.js file:

const express = require('express');
const fs = require('fs');
const csv = require('csv-parser');

const app = express();
const port = 3000;

app.use(express.static(__dirname));

app.get('/', (req, res) => {
    res.sendFile('/index.html');
});

app.get('/travel', (req, res) => {
    const data = [];

    fs.createReadStream('travelq.csv')
        .pipe(csv())
        .on('data', (row) => {
            data.push(row)
        })
        .on('end', () => {
            res.json(data);
        });
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

I’m adding firebase into my side-panel app in manifest V3. Here is how i deal with the code:

In service_worker (background.js):

    const firebaseConfig = {
    };
    firebase.initializeApp(firebaseConfig);
    console.log(firebase);

which shows I’ve initialized the app successfully.

In app.js ,

    button.addEventListener('click',function(){
    login();
    });
    
    function login(){
       e=email.value;
       p=password.value;
       firebase.auth().signInWithEmailAndPassword(e,p);
    }
    console.log("working");
    firebase.auth().onAuthStateChanged((user)=>{
    if(user){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.update(tabs[0].id, {url: "landing.html"});
        });
    }else{show.innerHTML="User is not defined";
    
    }
    });

However, I kept getting the error:

Uncaught FirebaseError: Firebase: No Firebase App ‘[DEFAULT]’ has been
created – call Firebase App.initializeApp() (app/no-app).

Anyone knows why?

I’m working with NestJS and once I load C++ Addon(I’m using Rust bindings with Neon), Ctrl C /SIGINT doesn’t stop the process.

Weird that in the the terminal, the server stops but process still continues to run and the port continues to be used.

Works perfectly when you remove the C++ addon.

I don’t know if there’s a more practical way of doing this, but I’ve found this tutorial by Mike Bostock exemplifying what I would like to achieve.

But, to be quite frank, I’m still at a loss, I feel like his tutorial went over the key points a little bit too quickly for me. More specifically, I especially don’t quite understand how that example decides on when to reduce the font size vs when to break a line.

Could anyone please reproduce his example here (on a <canvas> though, because he seems to have done it on an <svg>)?

I’ve been exploring various methods to create a WhatsApp pop-up that displays contact information when scanning a QR code, similar to the functionality seen when scanning through wa.me/qr/xxxxxxx. Is there a way to achieve this without using the original WhatsApp QR code, given its encoded nature? While wa.me/phonenumber directs to a chat room, I aim to specifically showcase contact details upon scanning. Any insights or techniques to accomplish this task would be greatly appreciated.

I’ve attempted to utilize wa.me/phonenumber, but it simply redirects to the chat room. Similarly, employing api.whatsapp.com/send/ leads to the same outcome—a direct entry into the chat room. My objective is to replicate the pop-up functionality observed with wa.me/qr/xxxxxxx.

I am trying to send a string containing type of error that user might encounter during logging in from login.php to signin.ajax.js file so the URL could be tailored according to the type of error

this is the login.php file

<?php

if (isset($_POST['signin'])) {
    $data = json_decode(file_get_contents("php://input"));
    
    $name = $data->username;
    $password = $data->password;

    // Instantiate LoginContr class
    include '../classes/LoginController.class.php';
    $login = new LoginController($name, $password);

    // Running error handlers and user handlers
    $login->loginUser();
    
    if ($login->getError()) {
        $response = ['error' => $login->getError()];
    } else {
        $response = ['success' => 'Logged in successfully'];
    }

    

    header('Content-Type: application/json');
    echo json_encode($response);
}

this is the signin.ajax.js file

const loginButton = document.getElementById("login");

loginButton.addEventListener('click', loginUser);

function loginUser(e) {
    e.preventDefault();
    let username = document.getElementById("login-username").value;
    let password = document.getElementById("login-password").value;
    let loginParams = {
        "username": username,
        "password": password
    }
    let jsonString = JSON.stringify(loginParams);

    let xhr = new XMLHttpRequest();

    xhr.open("POST", "../includes/login.php", true);

    xhr.setRequestHeader("Content-type", "application/json");

    xhr.onload = function () {
        if (xhr.status === 200) {
            let response;
            try {
                // Check if the response is not empty before parsing
                if (xhr.responseText.trim() !== "") {
                    response = JSON.parse(xhr.responseText);
                } else {
                    console.log("Empty response");
                    return;
                }
            } catch (error) {
                console.log("Error parsing JSON:", error);
                return;
            }
        
            if (response.error) {
                // Handle the error
                window.location.href = "../pages/loginRegister.page.php?error=" + encodeURIComponent(response.error);
            } else if (response.success) {
                // No error, successful login
                window.location.href = "../pages/loginRegister.page.php";
            } else {
                console.log("Unknown response format");
            }
        } else {
            console.error("Request failed. Status: " + xhr.status);
        }
    };

    xhr.send(jsonString);
}

this is the LoginController.class.php class

<?php

include 'LoginModel.class.php';


class LoginController extends LoginModel
{

    private $name;
    private $password;
    private $error;

    public function __construct($name, $password)
    {
        $this->name = $name;
        $this->password = $password;
        $this->error = null;
    }

    public function loginUser(){
        if($this->emptyInputUsernameAndPassword() == false)
        {
            $this->error = 'emptyInputUsernameAndPassword';
        }
        if($this->emptyInputUsername() == false){
            $this->error = 'emptyInputUsername';
        }
        if($this->emptyInputPassword() == false)
        {
            $this->error = 'emptyInputPassword';
        }
        
        $this->getUser($this->name, $this->password);
    }
    

    private function emptyInputUsername()
    {
        if (empty($this->name)) {
            $result = false;
        } else {
            $result = true;
        }
        return $result;
    }

    private function emptyInputPassword()
    {
        if (empty($this->password)) {
            $result = false;
        } else {
            $result = true;
        }
        return $result;
    }

    private function emptyInputUsernameAndPassword()
    {
        if (empty($this->name) && empty($this->password)) {
            $result = false;
        } else {
            $result = true;
        }
        return $result;
    }

    public function getError() {
        return $this->error;
    }
}

I tryed various console logs, try catch blocks and i allways get the same output that the response is empty.

[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Generating Closure dependencies...
[INFO] Linting JavaScript...
[ERROR] *** A required dependency is missing: C:Program Filesnodejsnode.EXE

I have followed the instructions given by the shaka-player https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html but it does not work and throws the above error.

I’ve just started converting my application over to use react query. I’m new to using this library, so I’m not sure if I’m misunderstanding how this is supposed to work, but it seems to me like the prefetching I’m doing isn’t working. Any help is greatly appreciated.

I have an expensive API call that I want to have prefetched after a user logs in, so that when they navigate to the page where the expensive API data is needed, there is a “perceived” performance increase.

What I’ve done so far:

On the home landing page:

queryClient.prefetchQuery(["requisition", auth.token, auth.id], () =>
  getRequisitionsAllData(auth.token, auth.id),
);

My custom hook:

export const useRequisitionQuery = (token, id) => {
  const queryOptions = { staleTime: 300 };
  return useQuery(
    ["requisition", token, id],
    () => getRequisitionsAllData(token, id),
    queryOptions,
  );
};

And then in the component that needs it:

const { isLoading, isError, data, error, isFetching } = useRequisitionQuery(
  token,
  id,
);

From what I can tell, the prefetch is working on the landing page:

But then for some reason when I navigate to the next page, it seems like instead of using the cached data, the query is called again from scratch (and the page doesn’t receive the data right away)

The table that is being populated by the data from the query also shows nothing until this network call finishes, and console.log on the data also returns [] until this call finishes.

Am I misunderstanding how this is supposed to work? I’m under the impression that the data should load immediately if it’s been cached.
Thank you for your time.

I am using dayjs and trying to achieve a datetime conversion depending on the user’s locale.

Example;

The data I have is 15 April 2024 America/Toronto 16:00. I want to convert this to user’s timezone – i.e Australia/Sydney or Europe/Paris or wherever they are. Also, the data I get won’t be only from America/Toronto, it could be a different timezone, so I need to make that dynamic, too.

I thought unix timestamp has the information of timezone(silly me) so I was trying by that conversion only to realise it didn’t work because unix is utc based. I do not want to use momentjs for this and thinking we should be able to do this either by dayjs or vanilla js.

I thought this would be simple but its causing me some issue in simpley replacing tag valuse with another. I am taking HTML code, and adding className to each H tag but I also need to change the to all h3 tags moving from legacy stored html ro my nextJs project,

starting code

<h1>Header one</h1>
<h2>header two </h2>

I need them to be

<h3>Header one</h3>
<h3>header two </h3>

current code all works except the noted

  data["review"] = data?.review?.map((entry) => {
    let desc = entry.description;
    const $ = cheerio.load(desc);
    $("p").addClass("my-4");
    $("h1").replaceWith("h3"); // <-- Not the desired result here
   
    $("h1").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h2").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h3").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h4").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h5").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h6").addClass("text-3xl font-semibold my-6 md:text-4xl");
    return { description: $.html() };
  });

I have a form that when the submit button is clicked it first runs through validation making sure all the required fields are filled out then it calls the google validate address api and if the address isn’t valid a popup modal should appear and prevent the form from submitting until the address is valid. The issue I am facing is if I enter an invalid address the modal is only displaying for a split second and then submitting my form without filling out the modal. The form is being created with razor and my onsubmit is calling a validateForm function. This looks like so,

@using (Html.BeginForm(action, "appointments", routeValues, FormMethod.Post, new RouteValueDictionary(new { @id = "myForm", @name = "myForm", @class = "form-horizontal", onsubmit = "return formHelper.validateForm(this);" })))

Inside the validateForm function, I am calling a validateAddress function like so,

  validateForm: function (t) {
    validateAddress().then(() => {
        if (addressConfirmed.value != 'true') {
            console.log('Line 641 addressConfirmed is still false');
            return false;
        }
        else {
            console.log('Line 645 addressConfirmed is true');
            return true;
        }
    });
}

Originally, I was calling this function like this

validateForm: function (t) {
  validateAddress();
  return false;
}

which was working to display the modal when the address was invalid without submitting the form until a selection was made on the modal. The issue with calling it this way is that it is preventing the form from being submitted when the address has no validation issues to begin with. The page would stay on the form without the form getting submitted and then when the submit button was clicked a second time then the form would submit. I need a way to submit the form if there are no address validation issues and if there are display the modal until the user selects an option. Since the validateAddress function is async I thought if I added a .then to the function call it would first call validateAddress, get a response and then return false if the address has not been confirmed and the return false would cause the form to not submit.

This is my validateAddress function:

async function validateAddress() {
    const response = await fetch('https://addressvalidation.googleapis.com/v1:validateAddress?key=@googleApiKey', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            "address": {
                "regionCode": "US",
                "addressLines": [
                    patientAddressLine.value
                ],
                "locality": patientCity.value,
                "administrativeArea": patientStateCode.value,
                "postalCode": patientPostalCode.value
            },
            "enableUspsCass": true
        })
    });
    if (!response.ok) {
       console.log(response.status);
    } else {
       const data = await response.json();
        console.log(data);
        const responseAddress = data.result.address;
        const responseVerdict = data.result.verdict;
        const googleAddressLine = responseAddress.postalAddress.addressLines[0];
        const googleCity = responseAddress.postalAddress.locality;
        const googleState = responseAddress.postalAddress.administrativeArea;
        const googleZipcode = responseAddress.postalAddress.postalCode;
        const hasInferredComponents = responseVerdict.hasInferredComponents;
        const addressComplete = responseVerdict.addressComplete;
        const hasReplacedComponents = responseVerdict.hasReplacedComponents;
        const hasUnconfirmedComponents = responseVerdict.hasUnconfirmedComponents;
        const missingComponentTypes = responseAddress.missingComponentTypes;
        // need if statement to only do this if the address is invalid
        // if hasInferredComponents is true or addressComplete is false and no validation errors then create the modal.  If it is false then submit the form
        if (hasInferredComponents || !addressComplete || hasReplacedComponents || missingComponentTypes) {
            console.log('inside if statement on line 919');
            populateModalValues(googleAddressLine, googleCity, googleState, googleZipcode, missingComponentTypes, hasInferredComponents, hasReplacedComponents);
            console.log('modal values should be populated');
            recommendedChangesModal.showModal();
            console.log('modal should show');
        } else if (hasUnconfirmedComponents) {
            console.log('address could not be verified');
            populateModalValidationIssues(responseAddress.unconfirmedComponentTypes);
            addressVerificationModal.showModal();
        } else {
            addressConfirmed.value = 'true';
            console.log('address confirmed is true');
        }
    }
}

I need to make a composable universal.

Here’s my case, I have 3 components – ItemSwiper, ItemCard and ViewRecipeDetail.

ItemSwiper contains card slides and it is the parent of ItemCard.

ItemSwiper has a loop of recipes:

<Slide v-for="recipe in storeRecipe.data" :key="recipe.recipe_id">
       <ItemCard :data="recipe"/>
</Slide>

Here I’m passing the data prop to ItemCard.

Then, in the ItemCard I use this prop to display the information:

<template>
    // here I'll add a skeleton loader that will be shown when the image is loading.
    <img class="card__image" :src="getSrc('.jpg')" :alt="data.alt" />
</template>

<script setup>
const props = defineProps(['data', 'pending']);

const isLoaded = ref(false);

const getSrc = ext => {
    return new URL(
        `../assets/images/content/recipe/${props.data.image}${ext}`,
        import.meta.url
    ).href;
};

onMounted(() => {
    const img = new Image(getSrc('.jpg'));
    img.onload = () => {
        isLoaded.value = true;
    };
    img.src = getSrc('.jpg');
});
</script>

I need to use this getSrc function and image preload in the onMounted hook in another component – ViewRecipeDetail, which isn’t related to these two. In ViewRecipeDetail will be displayed the detailed information about a recipe.

I was thinking of moving this function and a hook into composable useRecipe and then use this composable in ItemCard and in ViewRecipeDetail.

However, due to the fact that in ItemSwiper I pass the data prop, which has recipe as its value, i.e. recipe in a loop, if I pass this prop as a parameter like this:

import { useRecipe } from '@/composable/useRecipe';

const props = defineProps(['data', 'pending']);

const { isLoaded, getSrc } = useRecipe(props.data);

Then in useRecipe we can use it like this:

import { onMounted, ref } from 'vue';

export function useRecipe(data) {
    const isLoaded = ref(false);
    const getSrc = ext => {
        return new URL(
            `../assets/images/content/recipe/${data.image}${ext}`,
            import.meta.url
        ).href;
    };

    onMounted(() => {
        const img = new Image(getSrc('.jpg'));
        img.onload = () => {
            isLoaded.value = true;
        };
        img.src = getSrc('.jpg');
    });

    return {
        isLoaded,
        getSrc,
    };
}

This will work for ItemCard, but it won’t work for ViewRecipeDetail. Because I don’t need any loop in ViewRecipeDetail. All I need to do is go to that recipe detail page and see the relevant information for that particular recipe.

It turns out that useRecipe is not universal now. We pass props.data as a parameter and it works for ItemCard, but it won’t work for ViewRecipeDetail, because we need storeRecipe.data instead of props.data.

Please, give me a possible solution. (If you don’t understand something, please, let me know).