DEV Community

What is prop drilling in React?

Code of Relevancy on April 05, 2023

Yo ho, my hearties!!! Prop drilling is the process of passing down data or state through multiple layers of a component hierarchy. By the way, it ...

Read full post

Jon Snow • Apr 5 '23 • Edited

Thank you for sharing this. 👍💥💥

Need one help ...

How can i add sitemap in react js project

i add sitemap.xml file in public folder but google show this error

if i go to this url evstart.netlify.app/sitemap.xml

my sitemap is okay but problem on google search console

Please Help

Christopher Glikpo ⭐ • Apr 5 '23 • Edited

Adding a sitemap to a ReactJS project is an important step for search engine optimization (SEO) and can help search engines better index your website. Here's a step-by-step guide on how to add a sitemap to your ReactJS project:

Install the 'sitemap' package using npm or yarn.
npm install sitemap
or
yarn add sitemap
Create a sitemap file in your public directory. The file should be named sitemap.xml.
Import the 'sitemap' package in your ReactJS component where you want to generate the sitemap.
import { SitemapStream, streamToPromise } from 'sitemap';
import { Readable } from 'stream';
import { getServerSideProps } from 'next';
import fs from 'fs';
Create a function that will generate the sitemap data.
async function generateSitemapXml() {
const smStream = new SitemapStream({
hostname: 'example.com',
});
const staticPages = [
{ url: '/', changefreq: 'daily', priority: 1 },
{ url: '/about', changefreq: 'monthly', priority: 0.8 },
{ url: '/contact', changefreq: 'weekly', priority: 0.5 },
];

staticPages.forEach((page) => {
smStream.write(page);
});

smStream.end();

const sitemapXml = await streamToPromise(Readable.from(smStream.toString())).then((data) =>
data.toString()
);

fs.writeFileSync('public/sitemap.xml', sitemapXml);
}Call the function in the getServerSideProps method.export async function getServerSideProps(context) {
await generateSitemapXml();

return {
props: {},
};
}
Finally, add the sitemap.xml file to your robots.txt file.
Sitemap: example.com/sitemap.xml
Once you have completed these steps, your sitemap should be generated automatically whenever your ReactJS project is built, and search engines will be able to crawl and index your site more effectively.

Jon Snow • Apr 5 '23

i add this code

const fs = require('fs');
const { Sitemap } = require('sitemap');

const pages = [
  { url: '/', changefreq: 'daily', priority: 1.0 },
  { url: '/about', changefreq: 'weekly', priority: 0.8 },
  { url: '/contact', changefreq: 'monthly', priority: 0.5 },
];

const sitemap = new Sitemap({ pages });
const xml = sitemap.toXML();

fs.writeFile('./public/sitemap.xml', xml, (err) => {
  if (err) throw err;
  console.log('Sitemap generated successfully!');
});

Should i add anything else

Code of Relevancy • Apr 5 '23 • Edited

make sure to remove extra spaces with all the tags:

<loc> https://evstart.netlify.app/scooter/ather-450x-gen3 </loc>

it should be like this

<loc>https://evstart.netlify.app/scooter/ather-450x-gen3</loc>

Jon Snow • Apr 5 '23

thank you

Code of Relevancy • Apr 5 '23

update this tag:
lastmod instead of Lastmod

Jon Snow • Apr 5 '23

i update my sitemap but still getting same error

Derek Rosenzweig • Apr 7 '23 • Edited

There's a point where you have to layer your application code and be strict about what is responsible for domain, data access, connecting all your state for top-level views, and what (and how) data gets passed down to various children.

Sometimes you need intermediate connectors to connect a specific feature's state with overall app state. Separate those concerns and be consistent and you'll have a better time overall.

Lastly, the lower in the chain your components get, the dumber they should be. And by this I mean, if you have a folder for a view that contains a connector and several components used as children in the connector, those children don't necessarily have to know anything about the "what" or "why" of the values of the data coming into them - you can name them and use them only in the context of the child component. EG, instead of passing a function for an action creator from the connector called sendTheDataToTheBackendAndShowAGrowlerWhenDone with the same name to a deep child that's run when the user clicks on some button in the child, , call the prop in the child onSendButtonClick. Cleaner interfaces = easier to understand the context of your data in any given component. Deeply nested components means more general prop names.

This means not blindly passing props down - you are using differently named props, so you end up with much clearer boundaries for each interface. TypeScript really helps here because if you end up doing that, you'll get type errors. You can use the spread operator to name rest something useful like childXProps and apply those to the appropriate child; or if using different prop names, applying those manually.

Muhammad Raihan Satrio Putra Pamungkas • Apr 7 '23

Nice share, this reminds me of my previous project. I had encountered this anti-pattern when the Atomic Design methodology was being used on my React project. It's likely that you will encounter a similar issue when using Atomic Design.

This means that you are separating components from the largest to the smallest one. It consists of 4 to 5 level components, therefore we have to pass the data from the top-level parent all the way down to the bottom level.

If we use a common pattern, there will be a lot of unused props. This issue is challenging, and I prefer to use the Context API or other state management tools approach.

Anthony Fung • Apr 5 '23

Thanks for sharing.

I remember coming across this issue when learning React a while ago. I was transitioning from Silverlight and jumped straight into a project where the project lead had chosen Redux for state management. I was still trying to get my head around (standard) React and initially got so confused by container components!

Most of the projects I work on are Angular based nowadays, so my React knowledge is a bit stale. I seem to remember that the context was use-at-your-own-risk at the time (which admittedly was a long time ago) as things were still maturing and subject to API changes. Is the context API stable now in more recent versions?

Code of Relevancy • Apr 5 '23

Yes I think so.. Context API is more stable than before.

Ali Sina Yousofi • Apr 9 '23

Thanks Code of relevancy.
Using redux will make things easier.

Code of Relevancy • Apr 10 '23

Thank you reading

Nitesh Khatri • Jul 19 '23

It is good example and best implement.

Code of Relevancy • Aug 3 '23

Thanks

김로직 • Sep 20

Hello

There is a new technology, so I leave a message for your reference.

With React, Vue, and Angular, the problem of Props drilling can be resolved with BindModel at once, which manages data centrally and clearly separates business logic, significantly improving maintenance and reuse.

BindModel's components, MetaTable and MetaView, are defined as standard interfaces, making screen configurations more flexible. React and Vue can only manage screen-related responsibilities and delegate business logic to BindModel to reuse business logic on various screens.

If you have any questions, please contact me. Thank you.

bindmodel@gmail.com

exam git : github.com/white-base/exam-bind-mo...

site : bindmodel.com/exam/notice/