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
Related
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 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.
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}
/>
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>;