We Keep Coding

How to pass prop of one component to another component as a style

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");

In ReactJS toggle images in a child component from a parent component

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.

React component is getting rendered twice

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.

how to display whats up in a responsive way by using react js

enter image description herei develop what's up web by using react. my scenario is when ever i execute in desktop it will be displayed in a desktop responsive and whenever i displayed in a mobile it will be displayed in a mobile responsive how to do that in react.
Below i can add each and every page i develop for displaying what's up web.i want to display in mobile like what's up app so how to develop.click the enter description here it will show the image i developed.but i need only one app to have both responsivness & web.that means one url i want whats web & mobile whats app.
ChatListHeader.js
import React, { Component } from 'react';
class ChatListHeader extends Component {
render(){
return(
<div className="chatlist--header">
<div className="chatlist--header__image">
<img src={require('/home/srinath/Desktop/important/whats up web ui complete/whats up web
ui/src/images/Srinath.png')} alt={""}/>
</div>
<div className="chatlist--header__icons">
<i className="material-icons"></i>
<i className="material-icons"></i>
</div>
</div>
)
}
}
export default ChatListHeader;
import React, { Component } from 'react';
import ChatListHeader from '../presentational/ChatListHeader';
import ChatListSearch from './ChatListSearch';
import List from './List';
class ChatList extends Component {
render(){
return(
<div className="chatlist">
<ChatListHeader />
<ChatListSearch />
<List contacts={this.props.contacts} getChats={this.props.getChats}/>
</div>
)
}
}
export default ChatList;
import React, { Component } from 'react';
class ChatListSearch extends Component {
render(){
return(
<div className="chatlist--search" style={{"position": "relative"}}>
<input type="" placeholder="search or start a new chat"/>
<img src={require('../../images/searchicon.png')} alt={""} style={{"width": "15px", "position":"absolute","bottom":"18px","left":"20px","fontSize":"15px"}} />
</div>
)
}
}
export default ChatListSearch;
import React, { Component } from 'react';
import ListItem from '../presentational/ListItem';
class List extends Component {
render(){
let listitem = this.props.contacts.map((item) => {
return <ListItem item={item} key={item.id} getChats={ this.props.getChats }/>
})
return(
<div className="list">
{listitem}
</div>
)
}
}
export default List;
import React, { Component } from "react";
class ListItem extends Component {
render(){
let item = this.props.item;
return (
<div className="list--item" onClick={ (event) => { this.props.getChats(event, item.id) } }>
<div className="list--item__image">
<img src={item.profilePhoto} alt={item.name}/>
</div>
<div className="list--item__details">
<h3>{item.name}</h3>
<p>{item.lastMessage}</p>
</div>
</div>
)
}
}
export default ListItem;
import React, { Component } from 'react';
import ViewWhatsapp from '../presentational/ViewWhatsapp';
import ViewChatHistory from './ViewChatHistory';
class View extends Component {
render(){
let visibility = this.props.visibility;
let view;
view = (visibility) ? <ViewChatHistory selectedContactChat={ this.props.selectedContact } /> : <ViewWhatsapp />
return(
<div className="view" style={{"display": "flex", "flexGrow": "1"}}>
{ view }
</div>
)
}
}
export default View;
import React, { Component } from 'react';
class ViewChatHistory extends Component{
render(){
console.log(this.props.selectedContactChat);
return(
<div className="view--chat" >
{
this.props.selectedContactChat.map( (contact) =>{
return (
<header key={contact.id} >
<div className="user-details">
<img src={contact.profilePhoto} style={{"width": "45px", "height": "40px", "borderRadius": "100%", "marginRight": "20px"}} alt={""}/>
<div className="user-details-name">
<h3>{contact.name}</h3>
</div>
</div>
<nav className="extra-icons" style={{"width": "120px", "display": "flex", "justifyContent" : "space-between", "marginTop" : "10px"}}>
<i className="material-icons"></i>
<i className="material-icons"></i>
<i className="material-icons"></i>
</nav>
</header>
)
})
}
</div>
)
}
}
export default ViewChatHistory;

Responsive design is not something you do "differently" in React. You've still got the same old HTML, CSS, JS running in the browser.
Read more about responsive design

Cannot read props type of 'undefined'

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>;