import React, { useState ,useEffect} from 'react';
import { Link ,useHistory,useParams} from 'react-router-dom';
import { getDatabase,ref, child, get } from 'firebase/database';
import { auth, db } from './Config/Config';
export default function User()
const [user,setUser]=useState()
const {id}=useParams();
const dbRef = ref(getDatabase());
get(child(dbRef, AllUsers/${id})).then((snapshot) => {
if (snapshot.exists()) {
setUser(...snapshot.val());
} else {
console.log('user',user)
return (
{id}
</div>
)
}
IDK how to use that firebase id tho but if want to show data getting as responses then you already store firebase data in the local-state now you can use that state to get data and show anywhere {user.id} or whatever ur getting in response!
It's a design pattern using lowercase as params. So rename to allusers or all-users.
Are you sure you getting the right ID from params ?
also, paste your full code pls.
Related
I'm following this documentation:
https://pnp.github.io/pnpjs/sp/items/#add-multiple-items
But I'm getting an error with:
import { SPFI, spfi, SPFx } from "#pnp/sp";
import "#pnp/sp/webs";
import "#pnp/sp/lists";
import "#pnp/sp/items";
import "#pnp/sp/comments"
import "#pnp/sp/site-users/web";
let sp: SPFI;
export const CreateTableItems = async (listName: string, items: IMoscow) => {
const batch = sp.web.createBatch()
};
It's saying Property 'createBatch' does not exist on type 'IWeb & IInvokable<any>'.
I'm clearly missing something but the docs don't make it clear. I'm using the latest v3 version of sp/pnp and I am able to submit/update single items fine.
Maybe you've lost this import.
import "#pnp/sp/batching";
https://learn.microsoft.com/es-es/sharepoint/dev/spfx/web-parts/guidance/use-sp-pnp-js-with-spfx-web-parts
It seems createBatch is not part of sp.web and we need to use createBatch function and provide the list object as parameter. In my scenario, I wanted to delete multiple items using batching and implemented as below
import { SPFI, spfi, SPFx } from "#pnp/sp";
import "#pnp/sp/webs";
import "#pnp/sp/lists";
import "#pnp/sp/items";
import "#pnp/sp/batching";
import "#pnp/sp/items/get-all";
import { createBatch } from "#pnp/sp/batching";
let sp: SPFI;
export const DeleteItems = async (listName: string) => {
const list = await sp.web.lists.getByTitle(listName);
const items = await list.items.getAll();
const [batchedListBehavior, execute] = createBatch(list);
list.using(batchedListBehavior);
items.forEach((i: IItem) => {
list.items.getById(i["ID"]).delete();
});
await execute();
};
Ref- Advanced Batching
I am sending a form data from a form in reactjs. Some pre inputs from the user have to be sent altogether with the form. I get that data from the URL of the parent file and the form is in the child component.
Parent url: http://localhost:3000/uploadlist?phmcy=2
I have to get the phmcy value from the URL. (Here the data have to be passed is '2').
But the phamcy value returns "null" And I tried everything I knew but it keeps returning the null value.
The code segment of the parent file:
import Upload from './Upload'
import axios from "axios";
import { Link, withRouter } from "react-router-dom";
import { useLocation } from 'react-router';
export default function Uploadlist() {
let myphmcy = (new URLSearchParams(window.location.search)).get("phmcy.value")
console.log(myphmcy);
//rest of the code is not added.
Can someone please help me with this issue?
Correct me if I'm wrong, I think you are trying to get the value inside phmcy, right?
Change the get state meant to the following:
let myphmcy = (new URLSearchParams(window.location.search)).get("phmcy").value
Try this:
import Upload from './Upload'
import axios from "axios";
import { Link, withRouter } from "react-router-dom";
import { useLocation } from 'react-router';
import { useEffect } from "react";
export default function Uploadlist() {
const { search } = useLocation();
useEffect(() => {
const phmcy = new URLSearchParams(search).get("phmcy");
console.log(phmcy);
}
}
I have a component list of items in React. I want to filter these items based on URL path. For example if URL is something like below line I want items to be filtered by date attribute, with value 2010 :
http://localhost:3000/?filter='date'&value='2010'
As I'm so new in React I couldn't find any easy-to-understand answer, Is there any source I can learn about this question?
Thanks in advance
You should use useLocation hook to get the query params string from URL and then use query-string lib to parse the query params string to object. Like below:
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';
const App = () => {
const location = useLocation();
useEffect(() => {
console.log('query params object: ', queryString.parse(location.search));
}, [location])
}
export default App;
NOTE: Please be aware that the number of characters on a browser URL is limited, find the best solution that fits your need.
You simply can get data in url in this manner:
const [currentUrl, setCurrentUrl] = useState()
const currentUrl = window.location.href.split('/')
How can i retrieve some data from a local json file i created in my folder? i´m using the following code:
class Intro2 extends Component {
render() {
async function getData() {
const usersData = await fetch("../articles.json");
const users = await usersData.json();
return users;
}
}
This doesn't seem to work for my local json file but if i use a url from git hub users for example its working?
many thanks
The error: main.chunk.js:332 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
You shouldn't be using fetch.
Use import instead. This will ensure webpack doesn't bundle the json file.
But makes it available in the public directory.
const usersData = await import("../articles.json");
Fetch will never work because webpack won't serve your JSON file.
Not unless you put it in a the static or public folder.
I think if you're trying to read from your file system you won't be able to do it, because in at least some browsers, you will need to serve the file via a web server process.
But if you are trying to read from http://localhost:9000/articles.json the issue could be another thing.
Maybe you need the {mode:'no-cors'} param ?
fetch('../static/test.txt', {mode: 'no-cors'})
Else you could simply export it:
export const json = () => ({...})
and then import it to your file:
import {json} from '../json
Assuming the json is in the project's folder structure.
import React from "react";
import ReactDom from "react-dom";
import usersData from "../articles.json";
class Intro2 extends React.Component {
state = {
usersData: { ...usersData },
};
componentDidMount() {
// a place for promises
};
render() {
// where the jsx is rendered
return <div>Renders JSX with state {this.state.usersData.aKey}</div>;
}
};
or with react functional components
// Alternatively, use functional components:
import React from "react";
import usersData from "../articles.json";
function Intro2() {
const [usersData, setUsersData] = React.useState({ ...usersData });
return <div>Renders JSX with state {usersData.aKey}</div>;
}
I'm trying to figure out how to add data to cloud firestore from my react app.
I have it all working for the data entered in a form, but am missing something because when I try to add a createdAt timestamp, I get an error.
My current attempt is:
import React from "react";
import { Link } from 'react-router-dom'
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";
import { fsDB, firebase, settings } from "../../../firebase";
const Result = props => {
const { state } = {
useStateMachine(updateAction),
createdAt: firebase.firestore.FieldValue.serverTimestamp()
};
fsDB
.collection("project")
.add(state)
return (
<div>
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
);
};
export default Result;
If i remove the createdAt and just upload state, it all works fine.
I'm getting stuck on how to add the timestamp.
Can anyone see where I'm going wrong?
I have found this post which sets out a snap shot to merge a date field with a record. I'm struggling to understand if there is something about snapshot which needs the record to be created before a date can be added? It doesn't seem logical that I have to create a record before I can merge a date field into it.