We Keep Coding

extends/inherit parent component in function

export default function PageTemplate() {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
// Contents goes here
</div>
</div>
</div>
);
}
export default function Index() {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
<h2>I am Index Page<h2/>
</div>
</div>
</div>
);
}
As you can see most of my contents goes in #other-contents, I will be repeating PageTemplate for every page, I wondering if there is way to just re-use PageTemplate. Instead of repeating code, I would just do something like extends/inherit/whatever possible and reduce the code in Index
I believe this is easier achieved with Class Based Component. But I am wondering if there could function based solution

React prefers Composition over Inheritance. Use the children prop all react components have.
export default function PageTemplate({ children }) {
return (
<div className="layout">
<LeftMenu />
<div className="content">
<TopMenu />
<div id="other-contents">
{children}
</div>
</div>
</div>
);
}
Usage:
<PageTemplate>
// <-- render any content you want here
</PageTemplate>

How can I style map items to display in justify-content-around?

I'm looping through products by mapping them and the justify-content-around doesn't apply to them and I'm using bootstrap 4 in my react project .
Here is my code :
{props.products.map((item) => {
if (item.inCart) {
return (
<div className="d-flex justify-content-around w-100" key={item.id}>
<button>remove</button>
<div>
<h5>{item.name}</h5>
</div>
<div>
<h5>{item.price.toLocaleString('ar-EG')}</h5>
</div>
<div>
<h5>{item.number.toLocaleString('ar-EG')}</h5>
</div>
<div>
<h5>{(item.number * item.price).toLocaleString('ar-EG')}</h5>
</div>
<hr />
</div>
);
}
The display flex class applies but not the other one and they all have no margin between them .
How can I make them to display justify-content-around ??

Your problem come from the <hr> tag. I just discovered it by doing this repro on stackblitz. Remove it and it works.
If you readlly need it then just receate it:
const Divider = () => {
return <div className="border-bottom" />;
};
This one is bootstrap dependant but of course you can make it generic easily. You just need to apply it outside of your flex container :
<>
<div className='d-flex justify-content-around' key={item.id}>
<button>remove</button>
<h5>{item.name}</h5>
<h5>{item.name}</h5>
<h5>{item.name}</h5>
</div>
<Divider />
</>;

Add style to the imported component is React

I have one independent component 'notification' with its own CSS style. I want to show the notification component in my header component but with different styling. I imported the component in the header, but I unable to add style on it. Please help. I didn't want to change the notification component local style as it broke the notification functionality.
Code for importing notification component.
import React from 'react';
import bell from '../../../assets/icons/bell.svg';
import NotificationList from '../notification/NotificationList';
class Search extends React.Component{
constructor()
{
super()
this.state={
notificationStatus:false
}
}
render()
{
const style={
position:'absolute',
top:'70px',
left:'0px',
width:'100%',
height:'auto',
zindex:'2'
}
return(
<div className="col-md-8 col-sm-8">
<div className="row">
<div className="col-md-11 col-sm-11 search-container">
<input type="text" className="form-control" name="search" placeholder="Search" />
<i className="fa fa-search"></i>
</div>
<div className="col-md-1 col-sm-1 bell-container flex all-center relative">
<img src={bell} alt="bell icon" />
</div>
</div>
<NotificationList style={style} className="notification-component" />
</div>
)
}
}
export default Search;
Notification list component
import React from 'react';
class NotificationList extends React.Component{
constructor(props)
{
super(props)
this.state={
}
}
render()
{
const title={
marginBottom:'0px'
}
return(
<div className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">
<div className="row">
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
</div>
</div>
)
}
}
export default NotificationList;

I see you have included the style prop in your notification component,
<NotificationList style={style} className="notification-component" />
But you forgot to apply it again in your own export component Notification list component
(I tend to forget sometime, it happened to the best of us.)
<div style={this.props.style} className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">
I highly recommend styled-components for dealing with this styling stuff. Check it out here
Edited:
After reading again, I see you misunderstand a little bit of the style,
you can apply style on most primitive html component, such as div, span, section and etc. But when it comes to component, the style actually will not automatically applied, it is purposely designed that way, and the style will be goes to you props. You have to apply it again.
Example:
const Parent = ()=>{
return (
<div>
<MyCustomChild style={{fontSize:10}}>Some text</MyCustomChild>
</div>
)
}
export const MyCustomChild = (/* Properties */ props)=>
{
const {style, children} = props // extract your 'applied' property
return (
<div style={style /* passing it here */}>
{children}
</div>
)
}

You have only passed style but not used in Notification component.
You can access it using props which in your case is this.props.style.
Ex.
<div style={this.props.style} className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:
import React, { Component } from 'react';
import "./Skills.css";
export default class Skills extends Component {
static defaultProps = {
images: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
"https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
"https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
"https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
"https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
"https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
"https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
]
}
photo() {
return (
<div >
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
);
}
render() {
return (
<div id="skills-background" className="mt-5">
<div id="skills-heading" className="text-center">Skills I've Learned:</div>
<div className="container">
<div className="row">
{this.photo()}
</div>
</div>
</div>
)
}
}
CodeSandbox

I think, I found the issue,
<div> <-----This div is the issue
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments,
<> <-----Make it Fragment
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</>

Render a react.js component with document.write() inside

I am trying to render a component which uses document.write() inside, as I have to convert a json string to HTML. The problem I face is that when doing this the component only renders what is inside the document.write().
The code is the following:
render() {
return (
<div>
<Header />
<div className="main-wrapper">
<Link className="back-home" to="/">
All news
</Link>
{this.state.articles.map(articulo => {
console.log(articulo.content.rendered);
return (
<article className="article-wrapper" key={articulo.id}>
<h1>{document.write(articulo.title.rendered)}</h1>
<span className="article-date">
{this.dameFecha(articulo.date)}
</span>
<img
className="article-image"
src={
articulo.better_featured_image.media_details.sizes.small
.source_url
}
/>
<div className="article-content">
{document.write(articulo.content.rendered)}
</div>
</article>
);
})}
</div>
</div>
);
}
None of the elements are shown this way. I have already tried to put inside the document.write() all the elements, but React doesn't allow to do that. I mean doing this:
render() {
return (document.write(/* all the code */))
}
Is there any way to solve this?

You could use dangerouslySetInnerHTML to render your string of HTML:
<h1 dangerouslySetInnerHTML={{ __html: articulo.title.rendered }} />