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">
Related
I sending image path data from parent component(TaskSubmissions.js component) to child component(Card.js component) and same image path data I want to pass child component of Card which is CardDetail.js.
Problem is data is passed from TaskSubmissions.js to Card.js but it's not getting passed from Card.js to DetailCard.js
I am using react-router-dom . To understand it better below I am sharing all three components code. I'll appreciate your help.
P.S I am new to react and trying to understand the flow with such experiments.
Data Flow = image URL is passing from TaskSubmission.js to -> Card.js to -> DetailCard.js
Parent Component TaskSubmissions.js
import React from "react";
import Card from "../components/Card";
const TaskSubmissions = () => {
return (
<div className="container-fluid">
<div className="row justify-content-center mt-5">
<h1 className="text-info display-4 text-center">
Review All Students Task!
</h1>
</div>
<div className="row justify-content-center">
<p className="lead text-center">Rate your students performance</p>
</div>
<div className="row justify-content-center mt-5">
<div className="col-lg-3 col-md-4 col-sm-12">
<Card
name="Jane"
path="https://source.unsplash.com/aob0ukAYfuI/400x300"
/>
</div>
</div>
</div>
);
};
export default TaskSubmissions;
Child Component Card.js
import React from "react";
import { Link } from "react-router-dom";
const Card = (props) => {
return (
<div className="container-fluid">
<div className="row">
<h4 className="card-title">{props.name}</h4>
<Link
to={{
pathname: "/detail",
state: { imgpath: props.path, name: props.name },
}}
className="d-block mb-4 h-100"
>
<img
className="img-fluid img-thumbnail"
src={props.path}
alt="image"
/>
</Link>
</div>
</div>
);
};
export default Card;
GrandChild Component CardDetail.js
import React from "react";
import { useLocation } from "react-router";
const CardDetail = (props) => {
const data = useLocation();
return (
<div className="container-fluid">
<div className="row justify-content-center">
<div className="card mb-3">
<img src={data.imgpath} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{data.name}</h5>
<p className="card-text">Assignment 1 is completed.</p>
<p className="card-text">
<small className="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
);
};
export default CardDetail;
Try accessing it differently. You are currently doing const data = useLocation(); and then data.imgpath. Have you tried console.log(data)?
I would suggest the following change:
<img src={data.state.imgpath} className="card-img-top" alt="..."/>
<h5 className="card-title">{data.state.name}</h5>
Since you've stored it in
{{pathname: "/detail", state: {imgpath: props.path, name: props.name}}}
So it is held in data.state.
data Object should look something like this:
{
...
pathname: '/detail',
state: {
name: 'bar',
imgpath: 'foo'
}
}
This is my functional component. Works fine
import React from "react";
function RecommendationCard(props) {
const { name, designation, company, message } = props.recommendation;
return (
<div className="col-12 col-md-4">
<div className="card shadow h-100">
<div className="card-body">
<h4 className="card-text">{message}</h4>
<p className="card-text text-secondary mb-0">{name}</p>
<p className="card-text text-secondary">
{designation} at {company}
</p>
</div>
</div>
</div>
);
}
export default RecommendationCard;
The below code is converted state component.Here intead of using props , I used the data from my context.js file like state. It contains all the data like name,company,designation,recommendation. So I'm using it through the consumer . But that is not displaying the properties.
import React, { Component } from 'react';
import { Consumer } from '../context';
class RecommendationCardextends Component {
state = {
name:"",
message:"",
designation:"",
company:"",
}
render() {
return(
<Consumer>
{(value) =>{
const { name, designation, company,message } = this.state;
return (
<div className="col-12 col-md-4">
<div className="card shadow h-100">
<div className="card-body">
<h4 className="card-text">{message}</h4>
<p className="card-text text-secondary mb-0">{name}</p>
<p className="card-text text-secondary">
{designation} at {company}
</p>
</div>
</div>
</div>
);
}}
</Consumer>
);
}
}
export default RecommendationCard;
I request you to please solve this and help me out with this. Thanking you in advance.
<Consumer>
{({ name, designation, company, message }) => (
<div className="col-12 col-md-4">
<div className="card shadow h-100">
<div className="card-body">
<h4 className="card-text">{message}</h4>
<p className="card-text text-secondary mb-0">{name}</p>
<p className="card-text text-secondary">
{designation} at {company}
</p>
</div>
</div>
</div>
)}
</Consumer>
Assuming you don't intend to do anything with it going forward, your local state would be obsolete in the example you provided. All your data is inside value. I personally feel this becomes much easier when using the Hook API useContext.
I made a working example on codesandbox:
https://codesandbox.io/s/exciting-chatelet-7il42?file=/src/App.js
App:
import React from "react";
import "./styles.css";
import RecommendationCard from "./components/RecommendationCard";
import {MyContext} from "./context"
const initialState = {
message: "default message",
company: "default company",
designation: "default designation",
name: "default name"
};
export { MyContext };
export default function App() {
return (
<div className="App">
<MyContext.Provider value={initialState}>
<RecommendationCard />
</MyContext.Provider>
</div>
);
}
RecommendationCard:
import React, { Component } from "react";
import { MyContext } from "../context";
class RecommendationCard extends Component {
static contextType = MyContext;
render() {
return (
<div className="col-12 col-md-4">
<div className="card shadow h-100">
<div className="card-body">
<h4 className="card-text">{this.context.message}</h4>
<p className="card-text text-secondary mb-0">{this.context.name}</p>
<p className="card-text text-secondary">
{this.context.designation} at {this.context.company}
</p>
</div>
</div>
</div>
);
}
}
export default RecommendationCard;
context:
import React from "react";
export const MyContext = React.createContext();
I have a large and portfolio that I am building in React and I really want to avoid the process of rebuilding the entire project because of a styling framework.. Here is the situation: I am exporting App.js for the root of the project and because I have my components specifically built to use external data I chose to write this part of my app in the App.js instead of as another component.
My Materialize CSS Framework is what is causing the issues, I need it to display my className 'card' correctly, but when I use Materialize Framework it ruins the rest of my page. How can I designate my framework to ONLY work with one div object for example
How can I say "Only use Materialize CSS Framework for App3"
import React, { Component } from 'react';
import Header from './components/Header';
import About from './components/About';
import Resume from './components/Resume';
import Portfolio from './components/Portfolio';
import Testimonials from './components/Testimonials';
import ContactUs from './components/ContactUs';
import Footer from './components/Footer';
import resumeData from './resumeData';
class App extends Component {
render() {
return (
<div className="App">
<Header resumeData={resumeData}/>
<About resumeData={resumeData}/>
<Resume resumeData={resumeData}/>
<Portfolio resumeData={resumeData}/>
<div className="App3">
<div class="card" style={{ width: '18rem' }}>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src={weatherImage}></img>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-dark-4">
<i class="material-icons-right"><img src={iconUrl}></img></i></span>
</div>
<div class="card-reveal">
<span class="card-title activator grey-text text-dark-4">{this.state.cityName}
<i class="material-icons-right"><img src={iconUrl}></img></i></span>
<div className="row">
<div className="col s6 offset-s3">
<form onSubmit={this.searchCity}>
<input type="text" id="city" placeholder="City..."></input>
</form>
</div>
</div>
</div>
</div>
</div>
`
<Testimonials resumeData={resumeData}/>
<ContactUs resumeData={resumeData}/>
<Footer resumeData={resumeData}/>
</div>
);
}
}
export default App;
Basically what you want is to use scoped style like this
<div>
<style scoped>
#import "yourCssFileHere.css";
<div class="card" style={{ width: '18rem' }}>
</style>
</div>
You can get more help here http://css-tricks.com/saving-the-day-with-scoped-css/.
I'm trying out the examples in a book called Fullstack React. I don't know why the Product component isn't showing. I'm also a newbie to React and StackOverflow. Sorry for the mistakes I might make.
class Product extends React.component {
render() {
return (
<div className='item'>
<div className='image'>
<img src='images/products/image-aqua.png' />
</div>
<div className='middle aligned content'>
<div className='description'>
<a> Fort Knight </a>
<p> Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className='extra'>
<span> Submitted by:</span>
<img
className='ui avatar image'
src='images/avatars/daniel.png'
/>
</div>
</div>
</div>
);
}
}
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
<Product />
</div>
);
}
}
And it also uses the semantic framework.
React.component should be React.Component
You can also import Component at the same time as main React, e.g.
import React, { Component } from 'react'
I am using the twitter embedded timeline on my application to show the twitter feed of a companies twitter account.
When I get a result from an API, the state changes to the correct values, but the twitter widget does not appear to change
TwitterCard.js
import React from "react";
export class TwitterCard extends React.Component{
render() {
return (
<a className="twitter-timeline" href={this.props.href} data-height="100%">Tweets by {this.props.ticker}</a>
)
}
}
I have attached screenshots of the react plugin output for proof of state change.
The parent class is rather large, so I have posted the render method:
render() {
return (
<div>
<NavBar/>
<div className="container-fluid">
<div className="row">
<NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
<Dashboard
errorChart={this.state.errorChart}
twitter={this.state.twitter}
status={this.state.status}
/>
</div>
</div>
</div>
)
}
The parent passes these values to the Dashboard:
import React from "react";
import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";
import { TwitterCard } from "./TwitterCard";
export class Dashboard extends React.Component {
render() {
return (
<div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
<div className="row">
<div className="col-lg-8">
<div className="row">
<div className="col-lg-6">
<div className="card border-0">
<div className="card-body">
<Chart chart={this.props.errorChart}/>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<TwitterCard href={this.props.twitter} ticker={this.props.ticker}/>
</div>
</div>
</div>
)
}
}
You can force an update to the twitter component when the ticket changes by keying it with the ticker where you render it in your dashboard component:
<TwitterCard
key={this.props.ticker}
href={this.props.twitter}
ticker={this.props.ticker}
/>