Im trying to pass simple properties from my child component to the parent component . I can't for the life of me understand why I'm getting this error. My understanding of react is that you can declare props (i.e. this.props.text) in any function or class and then pass it to the parent.
Tickerbox.js (child)
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{this.props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
App.js (parent)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Tickerbox from './TickerBox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
day: 'monday',
month: 'january',
year: '1st',
};
}
render() {
return (
<div className="App">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Hi</h2>
</div>
<div className="container">
<div className="row">
<div className="col-sm-2 col-sm-push-3">day</div>
<div className="col-sm-2 col-sm-push-3">month</div>
<div className="col-sm-2 col-sm-push-3">year</div>
<Tickerbox text="test"></Tickerbox>
</div>
</div>
</div>
);
}
}
export default App;
Index.js (entry point)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Tickerbox it's a stateless component.
Stateless components are declared as function
you are trying to access to this.props.text but you already have the props in the arguments props
Instead of use this use the props passed that are the actual props for that component
Tickerbox.js
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
Issue is we cannot access this.props.text in functional components. It should either be props.text or make it a class based component.
<h1>{props.text}</h1>;
Related
The following code is written using the semantic UI class to display the header component.
This is the Header.js file.
import React from "react";
const Header = () => {
return (
<div className="ui fixed menu">
<div className="ui container center">
<h2>Contact Manager</h2>
</div>
</div>
);
};
export default Header;
This is the AddContact.js file
import React from "react";
class AddContact extends React.Component{
render(){
return(
<div className="ui main">
<h2>Add Contact</h2>
<form className="ui form">
<div className="field">
<label>Name :</label>
<input type="text" name="name" placeholder="name" />
</div>
<div className="field">
<label>Contact Number :</label>
<input type="text" name="contactnumber" placeholder="Contact Number" />
</div>
</form>
</div>
);
}
}
export default AddContact;
This is the App.js file.
import React from 'react';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
function App() {
return (
<div>
<Header />
<AddContact />
</div>
);
}
export default App;
This is the index.js file.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
When I run the project, the form component from the AddContact.js is displayed behind the Header component from the Header.js file. How can I solve this problem?
I'm just getting started with react and javascript development in general, i'm trying to nest a component. The Home component is rendering fine, the testComp is not showing up, very stuck pls help. Thanks!
home.component.js
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import testComp from "./test.component";
export default class Home extends Component {
render() {
return (
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<testComp />
</div>
<div class="col-sm">
One of four columns
</div>
<div class="col-sm">
One of four columns
</div>
<div class="col-sm">
One of four columns
</div>
</div>
</div>
);
}
}
test.component.js
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
export default class testComp extends Component {
render() {
return (
<p> TEST TEXT </p>
);
}
}
This may seem weird at first, but you have to use a capital letter at the start of the component. Try changing to:
export default class TestComp extends Component {
render() {
return (
<p> TEST TEXT </p>
);
}
}
and inside home component:
import TestComp from "./test.component";
<div class="col-sm">
<TestComp />
</div>
You will see the component renders. Here is a codesandbox example of the working case. You can read more about it
I have a parent component, RoutineDashboard, with a child component, . The child component has two props, image and checked, which are both images. I only want one of the images to show at a time. How can I use the button in the child component to toggle between the images in from the parent component?
import react, { Component } from 'react';
import { Route, NavLink, Switch} from 'react-router-dom';
import TaskCard from '../../Components/TaskCard';
import socks from '../../Images/iPhone 11 Pro/socks.svg';
import check from '../../Images/iPhone 11 Pro/check.svg';
class RoutineDashboard extends Component {
state = {
tasks: 4,
completeTasks: 0
}
updateTaskCountHandler (className) {}
render () {
return (
<div>
<div className="Container">
<div className="Tasks">
<TaskCard clicked={() => this.updateTaskCountHandler("task1")} className="task1" image={socks} check={check} title={'Get Dressed'}/>
</div>
</div>
</div>
);
}
}
export default RoutineDashboard;
Below is the child component :
import react from 'react';
import { Route, NavLink, Switch, Redirect } from 'react-router-dom';
import './TaskCard.css';
import star from '../Images/iPhone 11 Pro/star.svg';
import check from '../Images/iPhone 11 Pro/check.svg';
// import bed from '../Images/iPhone 11 Pro/bed.svg';
function TaskCard (props) {
function toggleCheck () {
}
return (
<div>
<div className="TaskCard">
<div className="card w-100">
<div className="card-body">
<div className="TaskItems">
<img src={props.image}></img>
<img src={star}></img>
<h5 className="card-title">{props.title}</h5>
<a href="#" id={props.id} className="btn btn-primary" onClick={()=>props.clicked()}>Done</a>
<img id="check" className="Check" src={check}></img>
</div>
</div>
</div>
</div>
</div>
);
}
export default TaskCard;
You can add a boolean variable to state and show the images based on this variable value.
You can also change its value when pressing the button.
I'm building an react app where I have a feed component and the feed component consists of array of post components. The post component contains a link in it for viewing the full post component. I'm not able to pass the respective props to the full post component. I'm not able to do a nested route for the fullpost component.
this is my layout component
import React, { Component } from "react";
import Header from "../Header/Header";
import classes from "./Layout.css";
import { Route, Switch } from "react-router-dom";
import FullPost from "../Feed/FullPost/FullPost";
import axios from "axios";
import Feed from "../Feed/Feed";
class Layout extends Component {
state = {
users: [],
};
componentDidMount() {
axios
.get("https://goodwill-60d8a.firebaseio.com/Users.json")
.then((response) => {
this.setState({ users: response.data });
});
}
render() {
console.log(this.state.users);
return (
<div className={classes.main}>
<div>
<Header />
</div>
<div className={classes.content}>
<Switch>
<Route
path="/"
exact
render={() => <Feed users={this.state.users} />}
/>
<Route path="/fullpost" exact render={() => <FullPost />} />
</Switch>
</div>
</div>
);
}
}
export default Layout;
FEED component
import React from "react";
import Post from "./Post/Post";
import classes from "./Feed.css";
const feed = (props) => {
const feedItems = Object.keys(props.users).map((key) => ({
id: key,
...props.users[key],
}));
return (
<div className={classes.feed}>
{feedItems.map((items) => (
<Post
key={items.id}
profilename={items.profileName}
profilepic={items.profilePic}
timestamp={items.timeStamp}
contentimage={items.contentImage}
contenttext={items.contentText}
trend={items.trend}
></Post>
))}
</div>
);
};
export default feed;
Post component
import React from "react";
import classes from "./Post.css";
import ShareButton from "../../UI/ShareButton/ShareButton";
import { Link } from "react-router-dom";
const post = (props) => {
return (
<div className={classes.post}>
<div className={classes.header}>
<div className={classes.profileimage}>
<img className={classes.pic} src={props.profilepic} alt="" />
</div>
<div className={classes.name}>{props.profilename}</div>
<div className={classes.timestamp}>{props.timestamp}</div>
</div>
<div className={classes.container}>
<div className={classes.image}>
<img src={props.contentimage} alt="" />
</div>
<div>
<div className={classes.text}>
<span>{props.contenttext}</span>
</div>
<div className={classes.fullpost}>
<Link to="/fullpost" {...props}>
See Full Post
</Link>
</div>
</div>
</div>
<div className={classes.footer}>
<div className={classes.trend}>
<span>{props.trend}</span>
</div>
<ShareButton />
</div>
</div>
);
};
export default post;
Full Post component
import React from "react";
import classes from "./FullPost.css";
import pic from "../../../Assets/Images/self.jpg";
import { Link } from "react-router-dom";
const fullPost = (props) => {
return (
<div className={classes.fullpost_container}>
<div className={classes.photo_container}>
<img src={props.profilepic} alt=" " />
</div>
<div className={classes.sidebar}>
<div className={classes.profileimage}>
<img src={props.profilePic} alt="" />
</div>
<div className={classes.profilename}>Tony Kroos</div>
<div className={classes.timestamp}>3 Hours Ago</div>
</div>
<div className={classes.feedlink}>
<Link to="/" className={classes.feedlink_text}>
See more posts
</Link>
</div>
</div>
);
};
export default fullPost;
I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest
It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.