I am trying to use a component that is already created, but I cant figure out what the problem is:
activetenant
import React, { Component } from 'react';
import authAction from '../../redux/auth/actions';
class ActiveTenant extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default ActiveTenant;
and the component where I am trying to use it
import React, { Component } from "react";
import { connect } from "react-redux";
import { Layout } from "antd";
import appActions from "../../redux/app/actions";
import TopbarUser from "./topbarUser";
import TopbarWrapper from "./topbar.style";
import themes from "../../settings/themes";
import { themeConfig } from "../../settings";
import { ActiveTenant } from "./activetenant";
const { Header } = Layout;
const { toggleCollapsed } = appActions;
const customizedTheme = themes[themeConfig.theme];
class Topbar extends Component {
render() {
const { toggleCollapsed } = this.props;
const collapsed = this.props.collapsed && !this.props.openDrawer;
const styling = {
background: customizedTheme.backgroundColor,
position: "fixed",
width: "100%",
height: 70
};
return (
<TopbarWrapper>
<Header
style={styling}
className={
collapsed ? "isomorphicTopbar collapsed" : "isomorphicTopbar"
}
>
<div className="isoLeft">
<button
className={
collapsed ? "triggerBtn menuCollapsed" : "triggerBtn menuOpen"
}
style={{ color: customizedTheme.textColor }}
onClick={toggleCollapsed}
/>
</div>
<ul className="isoRight">
<li>
<ActiveTenant />
</li>
<li
onClick={() => this.setState({ selectedItem: "user" })}
className="isoUser"
>
<TopbarUser />
</li>
</ul>
</Header>
</TopbarWrapper>
);
}
}
export default connect(
state => ({
...state.App.toJS()
}),
{ toggleCollapsed }
)(Topbar);
And the error
./src/containers/Topbar/Topbar.js 105:34-46 './activetenant' does not
contain an export named 'ActiveTenant'.
You are use export default ActiveTenant In this case code should be like this
import ActiveTenant from "./activetenant";
If you want to export mulitple value then use {} to import
for example
//test.js
var a = "cool";
var b = "dool";
export a;
export b;
import {a,b} from './test.js'
Related
Component, myImage is never read.
import React from 'react';
import { Box } from "#mui/material";
import { Link } from 'react-router-dom';
import myImage from './Profile/Profile.myImage';
const HomeProfile = () => {
return (
<Box sx={{ border: '1px dashed grey' }}>
<myImage />
<Link to="/app/profile" className="red btn-flat white-text">
Change Profile
</Link>
</Box>
)
}
export default HomeProfile;
This is the file './Profile/Profile.myImage':
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProfile } from '../../../actions';
import { Image } from 'react-bootstrap';
import axios from 'axios';
class myImage extends Component {
componentDidMount() {
this.props.fetchProfile();
}
async renderMyImage() {
const imageDir = await axios.get('/api/profile');
return (
<div>
<h1>hello</h1>
<Image src={imageDir.profileImg.type} />
</div>
);
}
render() {
return (
<div>
<div>{this.renderMyImage()}</div>
<h1>bye</h1>
</div>
);
}
}
function mapStateToProps({ user }) {
return { user };
}
export default connect(mapStateToProps, {fetchProfile})(myImage);
In the route.js, app.get('/api/profile') is defined like this.
however, nothing appears in the console.
app.get('/api/profile', requireLogin, async(req, res) => {
console.log('test: api/profile');
const profile = await User.find({ _user: req.user.id });
res.send(profile);
})
I thought, something was wrong in the function 'renderMyImage()', so I added "hello" and "bye", but still, nothing is on the view, while other components can be seen on the screen.
axios is async so renderMyImage should be an async function.
Have you tried
async renderMyImage() {
const imageDir = await axios.get('/api/profile');
return (
<div>
<h1>hello</h1>
<Image src={imageDir.profileImg.type} />
</div>
);
}
I am a beginner in React js and I'm trying to implement Context Provider in React js. But while I'm not getting the perfect output.
I am storing contact info in context.js which will act as Context Provider and in App.js I imported it in App.js then in Contacts.js I Consumed the Consumer and got the value but still, I'm getting the blank page and I'm not sure why I cannot bind the contact component in Context provider
Context.js
import React, {Component} from 'react';
const Context = React.createContext();
export class Provider extends Component {
state = {
contacts: [{
id: 1,
name: "dasd B",
email: "asdas#gmail.com",
phone: "dsadas"
}
};
render() {
debugger
return (
<Context.Provider value={this.state}>
{this.props.childern}
</Context.Provider>
);
}
}
export const Consumer = Context.Consumer;
App.js
import React, { Component } from 'react';
import Header from './components/Header';
import Contacts from './components/Contacts'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from './Context'
class App extends Component {
render() {
return (
<Provider>
<div className="App">
<div className="container">
<Contacts />
</div>
</div>
</Provider>
);
}
}
export default App;
Contacts.js
import React, { Component } from 'react'
import Contact from './Contact';
import { Consumer } from '../Context';
class Contacts extends Component {
deleteContact = id => {
const { contacts } = this.state;
const newContacts = contacts.filter(contact => contact.id!== id);
this.setState({
contacts: newContacts
});
};
render() {
debugger
return(
<Consumer>
{value => {
const { contacts } = value;
return (
<React.Fragment >
{contacts.map(contact => (
<Contact
key = {contact.id}
contact={contact}
deleteClickHandler = {this.deleteContact.bind(this, contact.id)}>
</Contact>
))}
</React.Fragment>
);
}}
</Consumer>
);
}
}
export default Contacts;
Contact.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Contact extends Component {
state = {
showContactinfo : false
};
onDeleteClick = () => {
this.props.deleteClickHandler();
}
onEditClick() {
}
render() {
const { name, email, phone } =this.props.contact;
const { showContactinfo } = this.state;
return (
<div className="card card-body mb-3">
<h4>{name}
{showContactinfo ? (
<div className="float-right">
<i
onClick= {this.onEditClick}
style={{cursor: 'pointer', fontSize: 'medium'}}
className="fas fa-edit mr-3"></i>
<i
onClick= {this.onDeleteClick}
style={{cursor: 'pointer', fontSize: 'medium'}}
className="fa fa-trash-alt"></i>
</div>):
<i className="fa fa-sort-down float-right"
style={{cursor: 'pointer'}}
onClick={() =>
this.setState({ showContactinfo: !this.state.showContactinfo})}></i>}
</h4>
{showContactinfo ? (
<ul className="list-group">
<li className="list-group-item">Email: {email}</li>
<li className="list-group-item">Phone: {phone}</li>
</ul>) : null}
</div>
)
}
}
Contact.propTypes = {
contact: PropTypes.object.isRequired,
deleteClickHandler: PropTypes.func.isRequired
}
export default Contact;
I'm trying to add simple React Context to my app. I create Context in "./components/DataProvider.js" that looks like this:
import React, { Component } from 'react'
const DataContext = React.createContext()
class DataProvider extends Component {
state = {
isAddButtonClicked: false
}
changeAddButtonState = () => {
if( this.state.isAddButtonClicked ) {
this.setState({
isAddButtonClicked: false
})
} else {
this.setState({
isAddButtonClicked: true
})
}
}
render() {
return(
<DataContext.Provider
value={{
isAddButtonClicked: this.state.isAddButtonClicked,
changeAddButtonState: () => {
if( this.state.isAddButtonClicked ) {
this.setState({
isAddButtonClicked: false
})
} else {
this.setState({
isAddButtonClicked: true
})
}
}
}}
>
{this.props.children}
</DataContext.Provider>
)
}
}
const DataConsumer = DataContext.Consumer
export default DataProvider
export { DataConsumer }
Which then I added to "./pages/_app.js"
import App, { Container } from 'next/app'
import DataProvider from '../components/DataProvider'
class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Container>
<DataProvider>
<Component {...pageProps} />
</DataProvider>
</Container>
)
}
}
export default MyApp
And consume it in "./components/AddPostButton.js".
import React, {Component} from 'react'
import { DataConsumer } from './DataProvider'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faPlus } from '#fortawesome/free-solid-svg-icons'
class AddPostButton extends Component {
render() {
return (
<div>
<DataConsumer>
{({ changeAddButtonState }) => (
<a onClick={changeAddButtonState}>
<FontAwesomeIcon icon={faPlus} color='#fff' />
</a>
)}
</DataConsumer>
</div>
)
}
}
export default AddPostButton
But I get this error "Cannot read property 'changeAddButtonState' of undefined". I'm using React 16.7 and NextJS 7.0.2. Don't know what is wrong.
The second question is should I use one Context for everything or just use them as Model in MVC pattern?
I fixed it by moving changeAddButtonState to Context Component state so my DataProvider.js now looks like this
import React, { Component } from 'react'
const DataContext = React.createContext()
class DataProvider extends Component {
state = {
isAddButtonClicked: false,
changeAddButtonState: () => {
if (this.state.isAddButtonClicked) {
this.setState({
isAddButtonClicked: false
})
} else {
this.setState({
isAddButtonClicked: true
})
}
}
}
render() {
return(
<DataContext.Provider
value={this.state}
>
{this.props.children}
</DataContext.Provider>
)
}
}
const DataConsumer = DataContext.Consumer
export default DataProvider
export { DataConsumer }
And then in AddButton component I changed code to look like this
import React, {Component} from 'react'
import { DataConsumer } from './DataProvider'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faPlus } from '#fortawesome/free-solid-svg-icons'
class AddPostButton extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<DataConsumer>
{(context) => (
<a onClick={context.changeAddButtonState}>
<FontAwesomeIcon icon={faPlus} color='#fff' />
</a>
)}
</DataConsumer>
</div>
)
}
}
export default AddPostButton
React Newbee here
Firstly , I have a component DetailMovieCard.jsx where I am inserting background image in componentDidMount () It works fine but I was wondering is there any other efficient way instead of using
document.body.style.backgroundImage
DetailMovieCard.jsx
import React, { Component } from "react";
import { Row, Col, Glyphicon, Button } from "react-bootstrap";
import styled from "styled-components";
import { URL_IMAGE, URL_BACKGROUND } from "../const";
const Wrapper = styled.div`
max-width: 60%;
overflow: hidden; `;
const Image = styled.img`
float: left;
width: 40%;
`;
class DetailMovieCard extends Component {
componentDidUpdate() {
document.body.style.backgroundImage =
`url(${URL_BACKGROUND}${this.props.movie.backdrop_path})`;}
render() {
const {
poster_path, original_title, backdrop_path, tagline, overview,
} = this.props.movie;
return (
<Wrapper>
<Image alt="" src={`${URL_IMAGE}${poster_path}`} />
<div className="movie-details">
<h3>Title of the movie is {original_title} </h3>
<div>
<div className="movie-tagline"> {tagline} </div>
<div className="movie-overview">{overview} </div>
</div>
</div>
</Wrapper>
);
}
}
export default DetailMovieCard;
Secondly , I have a component called MovieDetails.jsx currently I am giving data fetched by componentDidMount() directly to <DetailMovieCard movie={this.state.movieData} > again it works fine but is there any better way of doing it ?
import React, { Component } from "react";
import axios from "axios";
import { URL_DETAIL, API_KEY } from "../const";
import DetailMovieCard from './DetailMovieCard';
import Header from './Header';
class MovieDetails extends Component {
constructor(props) {
super(props);
this.state = {
movieData: { movies: " " }
};
}
componentDidMount() {
const { id } = this.props.match.params;
axios.get(`${URL_DETAIL}${id}${API_KEY}&language=en-US&page=1`)
.then(response => {
this.setState({ movieData: response.data });
});}
render() {
return (
<div className= "movie-container">
<Header/>
<DetailMovieCard movie={this.state.movieData} />
</div>
);
}
}
export default MovieDetails;
You can always use callbacks:
Set the backgroundImage in your main App component there is no reason to use <body>
Keep the current backgroundImage url in main App component state or in redux store
Then you can set the backgroundImage url using regular javascript callbacks
im using react with react-redux and react-router. im working on my blog, in which i have a component with shows list of posts. so everything is working fine but when i get post.id in component it gives me undefined. on the other hand posts are passing to component from container.
please look into my code.
//home_container.js
import { connect } from 'react-redux'
import { show } from './actions'
import HomeComponent from './home_component'
const mapStateToProps = (state) => {
return {
posts: state.posts.data
}
}
const mapDispatchToProps = (dispatch) => {
return {
actions:{
showPosts: (page,limit) => {
show(dispatch,page,limit)
}
}
}
}
const HomeContainer = connect(
mapStateToProps,
mapDispatchToProps
)(HomeComponent)
export default HomeContainer
//home_component.js file
import React, {Component} from 'react';
import Paper from 'material-ui/Paper';
import Style from './styles.css'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import FlatButton from 'material-ui/FlatButton';
import { Link } from 'react-router'
require('rc-pagination/assets/index.css');
const Pagination = require('rc-pagination');
const style = {
height: "100%",
margin: 10,
padding: 10,
display: 'inline-block',
};
var Detail = React.createClass({
render: function() {
return (
<div >
<div className="row">
<div >
<p>{this.props.post?this.props.post.body.substr(1,600):''}</p>
{this.props.post?
<span style={{"float":"right"}}>
<Link to={`/posts/${this.props.post.id}`}>
<FlatButton
label="Ready more"
labelPosition="before"
primary={true}
/>
</Link>
</span>
:''}
</div>
</div>
</div>
)
}
});
class Index extends Component {
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
componentDidMount(){
this.props.actions.showPosts(1,5)
}
render() {
return (
<div >
{this.props.posts.map((post,i) =>
<div className="row" key={i}>
<Paper
style={style}
zDepth={0}
children={<Detail post={post}/>}
/>
)}
</div>
);
}
}
Index.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default Index;
i already check through react-redux inspector. i have posts in posts props of this component, which are sets by container through react redux.
so problem is in the following part of above code.
<Link to={`/posts/${this.props.post.id}`}>
<FlatButton
label="Ready more"
labelPosition="before"
primary={true}
/>
</Link>
Link to tag of react router generate url in this form posts/undefined. because it is considering that post.id is undefined. on the other hand each post have id property and i also checked it through inspection of posts objects.
so problem is in this line this.props.post.id