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.
Related
I have a code to allow user to input a color. I want to set that as the background color for multiple pages. When the user selects that color it only styles the container for the color selection and nothing else. I am trying to figure out how to style multiple pages with this code so I don't think I can just put them together. I have attempted passing the prop at different locations on the page to update but nothing. It's like they can't see each other at all.
Here is the page I want to update:
KidPortal.js
import React from 'react';
import ReactDOM from "react-dom";
import 'antd/dist/antd.css';
import { Avatar } from 'antd';
import './kidportal.css';
import AvatarSelector from './AvatarSelector';
import GirlAvatar from "../avatars/girl_avatar.png";
import BoyAvatar from "../avatars/boy_avatar.png";
import DuckAvatar from "../avatars/duck_avatar.png";
import GameIcon from "../icons/game_icon.png";
import QuizIcon from "../icons/quiz_icon.png";
import MusicIcon from "../icons/music_icon.png";
import StoryIcon from "../icons/storytelling_icon.png";
import BackgroundColor from './BackgroundColor';
import { color } from './BackgroundColor';
const Portal = (color) => {
return (
<div className="kid-page-main">
<div className='kid-header'>
<h3 className='kid-welcome'>Hello</h3>
<BackgroundColor />
{ <img src={DuckAvatar} className="kid-avatar" /> }
</div>
<div className='kid-page-body'>
<a className='games-button'><img src={ GameIcon} alt="game button" /></a>
<a className='quizzes-button'><img src={ QuizIcon } alt="quiz button" /></a>
<a className='music-button'><img src={ MusicIcon} alt="music button" /></a>
<a className='storytelling-button'><img src={ StoryIcon} alt="story button" /></a>
</div>
</div>
);
};
Here is the code I am using to update:
BackgroundColor.js
import React from "react";
import ReactDOM from "react-dom";
import Portal from './KidPortal'
import "./kidportal.css";
class Color extends React.Component{
//initial state setup
constructor(props) {
super(props);
this.state = {
color: "white"
};
}
changeColor(e) {
this.setState({
color: e.target.value
});
}
render() {
const stylesPage = {
background: this.state.color
};
return (
<div style={stylesPage} className="container" >
<div className="color-box">
<p>What is your favorite color?</p>
<input
value={this.state.color}
onChange={this.changeColor.bind(this)}
/>
</div>
</div>
);
}
}
export default Color;
document.getElementsByClassName("main-page");
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 am creating a component where when I press the following button it changes the component and the Step is updated, but I don't know how to make that when I press the button it changes the component and returns
STEP:
import React from "react"
import { Steps } from "rsuite"
import "rsuite/dist/styles/rsuite-default.css" // or 'rsuite/dist/styles/rsuite-default.css'
import "./index.css"
export default function Registration() {
const styles = {
width: "200px",
display: "inline-table",
verticalAlign: "top",
}
return (
<div>
<Steps current={1} vertical style={styles}>
<Steps.Item title="1" />
<Steps.Item title="2" />
<Steps.Item title="3" />
<Steps.Item title="4" />
</Steps>
</div>
)
}
and this would be the component where you sent them to call
import React from "react";
import "./styles.css";
import Com1 from "./Component1";
import Com2 from "./Component2";
import Com3 from "./component3";
import Step from "./Step "
export default function App() {
return (
<div className="w-full flex">
<Step/>
<Com1/>
<Com2/>
<Com3/>
<div className="App">
<button>next</button>
<button>return</button>
</div>
</div>
);
}
each component has a next and back 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.
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>;