We Keep Coding

JavaScript React: Issues with passing prop from a function in a child component to a function in the parent

I'm dealing with a problem passing a prop to a parent component from it's child.
The idea of the code that I'm trying to make work is a set of buttons in a header component that when clicked, load new component pages for other parts of the website. I'm dealing with a couple of smaller bugs that I can fix at another time but the primary issue is when I try to pass the results of the function for handling the switch and the values showing as 'undefined' once they get to the App component. I doubt I'm explaining it well so allow me to show the code.
Parent Component (App)
import React from "react";
import Header from "./Components/Header/Header";
import Footer from "./Components/Footer/Footer";
import Pane from "./Components/Pane/Pane";
import MainPane from "./Components/Pane/MainPane";
import BookViewPane from "./Components/Pane/BookViewPane";
import AddBookPane from "./Components/Pane/AddBookPane";
import SignInPane from "./Components/Pane/SignInPane";
import "./App.css";
const App = ()=>{
function LoadPaneHandler(props){
var NewPaneName=props.paneName;
// const NewPaneName={
// name: props.paneName
// };
// const NewPaneName=String(props);
console.log(NewPaneName);
switch(NewPaneName){
case 'MainPane':
return <MainPane />
case 'AddBookPane':
return <AddBookPane />
case 'BookViewPane':
return <BookViewPane />
case 'SignInPane':
return <SignInPane />
default:
return <Pane />
}
}
return(
<React.Fragment>
<Header switchPane={LoadPaneHandler} />
<main>
<LoadPaneHandler paneName="MainPane" />
</main>
<Footer />
</React.Fragment>
);
}
export default App;
Child Component (Header)
import React from "react";
import "./Header.css";
const Header=(props)=>{
var paneName="";
const switchPaneHandler=event=>{
event.preventDefault();
console.log(paneName);
props.switchPane(paneName);
}
return(
<header id="header">
<div id="header-title">
<h1>Library</h1>
</div>
<div id="header-buttons">
<button onClick={paneName="BookViewPane",switchPaneHandler}> View Books</button>
<button onClick={paneName="AddBookPane",switchPaneHandler}> Add Books </button>
<button onClick={paneName="SignInPane",switchPaneHandler}> Login</button>
</div>
</header>
);
}
export default Header;
I've included the commented out code of other approaches I've used to get the data I need for the function to work properly so that you can have an Idea of what I've already tried.
The code works fine so long as I only pass values to the function from within the App component. Whenever I click on one of the buttons in the header though, it shows the 'paneName' correctly in the 'switchPaneHandler' function but then in 'LoadPaneHandler' it prints as 'undefined'.
I'm still quite new to React so it's likely a very obvious mistake that I've made but any help is appreciated all the same. Thanks!

I think the key issue here is probably caused by confusion about "What are props? What is state?" - very common when getting started with React.
If we look at the parent component first, you're passing LoadPaneHandler to your Header like it's a callback function. That's not how we do it in React. We need to supply a callback function that takes the name of the pane that we want the parent to show. Naming can really help too in order to make things clearer. Here's how I'd rewrite your parent:
const App = ()=>{
const [currentPaneName, setCurrentPaneName] = React.useState("MainPane")
function updateCurrentPane(newPaneName) {
console.log(`Updating pane from ${currentPaneName} to ${newPaneName}`);
setCurrentPaneName(newPaneName)
}
function LoadPaneHandler(){
console.log(`Showing pane ${currentPaneName}`);
switch(currentPaneName){
case 'MainPane':
return <MainPane />
case 'AddBookPane':
return <AddBookPane />
case 'BookViewPane':
return <BookViewPane />
case 'SignInPane':
return <SignInPane />
default:
return <Pane />
}
}
return(
<React.Fragment>
<Header onNewPaneSelected={updateCurrentPane} />
<main>
<LoadPaneHandler />
</main>
<Footer />
</React.Fragment>
);
}
I've left a sprinkling of console.logs in there so you can get a feel for the timing of re-rendering and responding (React-ing) to change. If you're not familiar with useState(), this is the one React hook you absolutely must understand if you're going to build useful React applications - here are the docs.
Now for the child. You've got a paneName variable but you don't need it. All you're really trying to do is set up the right argument when you call the callback:
const Header=(props)=>{
const switchPaneHandler= (paneName) =>{
event.preventDefault();
console.log(paneName);
props. onNewPaneSelected(paneName);
}
return(
<header id="header">
<div id="header-title">
<h1>Library</h1>
</div>
<div id="header-buttons">
<button onClick={() => switchPaneHandler("BookViewPane")}> View Books</button>
<button onClick={() => switchPaneHandler("AddBookPane")}> Add Books </button>
<button onClick={() => switchPaneHandler("SignInPane")}> Login</button>
</div>
</header>
);
}
Note I changed the name of the callback function it's expecting to be given as a prop - switchPane was a bit misleading - it's not this component's job to switch panes, it just needs to be able to tell someone that the user wants to switch. This also makes it easier to make changes in the future, for example if you have other things that are interested in which pane the user wants to see.

Try to change your child component (Header) like this.
import React from "react";
import "./Header.css";
const Header = (props) => {
const switchPaneHandler = paneName => {
console.log(paneName);
props.switchPane(paneName);
}
return(
<header id="header">
<div id="header-title">
<h1>Library</h1>
</div>
<div id="header-buttons">
<button onClick={()=> switchPaneHandler('BookViewPane')}> View Books</button>
<button onClick={() => switchPaneHandler("AddBookPane")}> Add Books </button>
<button onClick={() => switchPaneHandler("SignInPane")}> Login</button>
</div>
</header>
);
}

In header component your passing the paneName directly, but in parent component you are trying to get as javascript object (props.paneName), that is why you are getting error.
const switchPaneHandler=event=>{
event.preventDefault();
console.log(paneName);
props.switchPane(paneName);
}
so try to access directly,
function LoadPaneHandler(paneName){
var NewPaneName = paneName;
console.log(NewPaneName);
switch(NewPaneName){
case 'MainPane':
return <MainPane />
case 'AddBookPane':
return <AddBookPane />
case 'BookViewPane':
return <BookViewPane />
case 'SignInPane':
return <SignInPane />
default:
return <Pane />
}
}

Rsuite not working properly how to fix? ReactJS

Hello everyone i installed rsuite through npm i rsuite and imported import "rsuite/dist/styles/rsuite-default.css".
The thing is that buttons or default text inputs works perferctly , but when i use a select or date picker or whatever has to do with a pop up or a collapse they dont show me the data. Like if i click on a select component it does not show me the option even if i can go trhough them and select ! but they are invisible.
Thats my code :
import { Container, Row, Col } from 'reactstrap'
import { DatePicker } from 'rsuite';
import "rsuite/dist/styles/rsuite-default.css"
export default class Forms extends Component {
constructor(props){
super(props)
this.state={
}
}
render() {
return (
<div>
<Container fluid>
<Row className="Col_margin py-4 px-1">
<Col className="Col_margin px-1" md={6}>
<label>name</label>
<DatePicker block/>
</Col>
</Row>
</Container>
</div>
)
}
}```
THATS HOW IT SHOWS TO ME , I CAN CLICK ON IT AND CHOOSE THE DATE BUT I DONT SEE NOTHING, I KINDA CHOSED BLIND
THATS HOW IT SHOULD BE , SHOWING THE DATE OPTIONS AND THE BUTTON OK
I want to tell you that in the first image the date table does not appear visible but is there , like if i move the mouse and click randomly the date appear on the form but it just not show, idk how to show to you because it just not there xD

You just need to import the styling that follows the rsuite package:
import "rsuite/dist/rsuite.min.css";

I would suggest testing your code in a sandbox. I have created codesandbox link. It might be some other possible reason.
import React, { Component } from "react";
import { Container, Row, Col } from "reactstrap";
import { DatePicker } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default class Forms extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Container fluid>
<Row className="Col_margin py-4 px-1">
<Col className="Col_margin px-1" md={6}>
<label>name</label>
<DatePicker block />
</Col>
</Row>
</Container>
</div>
);
}
}
Output:

Trying to use componentWillReceiveProps to change the button color

I am trying to use componentwillReceiveProps to change the button color.
when I click the news channel, get top news button should change the color.
so I thought in Button.js I will use componentwillReceiveProps
so that after I receive the props I will change the button color.
but inside componentwillReceiveProps of Button.js nothing is printing.
I researched and found the below link, but still not helping me
How do i use componentWillReceiveProps() correctly?
can you tell me how to fix it?
providing my code snippet and sandbox below
https://codesandbox.io/s/boring-wu-btlre
class Button extends Component {
componentWillReceiveProps(nextprops) {
console.log("componentWillReceiveProps nextprops--->", nextprops);
}
render() {
return (
<div>
<button
onClick={() => {
// getPosts(channel);
// getAlert();
}}
className="btn btn-primary btn-lg btn-block"
>
Get top news
</button>
</div>
);
}
}

That's your app.js from SandBOX and its clearly showing you are not passing anything to the button component. That's why its not showing anything.
import React from "react";
import ChannelsField from "./ChannelsField";
import RecentChannelItem from "./RecentChannelValues";
import Button from "../containers/Button";
import TopNews from "../containers/TopNews";
const App = () => (
<div>
<RecentChannelItem />
<ChannelsField />
<Button />
<TopNews />
</div>
);
export default App;

Odd behavior with react-modal

I'm trying to build a quiz that uses react-modal to provides hints. I will need multiple modals inside the quiz. I'm new to React so it's quite possible that I'm making a simple mistake.
I'm not sure it matters, but I've built this using create-react-app.
My App.js looks like this:
import React, { Component } from 'react';
import HintModal from './hintModal';
import Modal from 'react-modal';
import './App.css';
Modal.setAppElement('#root');
class App extends Component {
state = {
modalIsOpen: false,
hint: ''
};
openModal = (hint) => {
this.setState({ modalIsOpen: true, hint: hint });
}
closeModal = () => {
this.setState({ modalIsOpen: false, hint: '' });
}
render() {
return (
<React.Fragment>
<h1>Modal Test</h1>
<h2>First Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="mango"
/>
<hr />
<h2>Second Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="banana"
/>
</React.Fragment>
);
}
}
export default App;
hintModal.jsx looks like this:
import React, { Component } from 'react';
import Modal from 'react-modal';
const HintModal = (props) => {
const {openModal, modalIsOpen, closeModal, hint} = props;
return (
<React.Fragment>
<button onClick={ () => openModal(hint) }>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Example Modal"
>
<h2>Hint</h2>
<p>{hint}</p>
<button onClick={closeModal}>Close</button>
</Modal>
<p>We should see: {hint}</p>
</React.Fragment>
);
};
export default HintModal;
Here's the problem: I need the content of the modal to change based on the hint prop passed to HintModal. When I output hint from outside <Modal>, it behaves as expected, displaying the value of the prop. But when I output hint within <Modal>, it returns "banana" (the value of the hint prop for the second instance of HintModal) when either modal is activated.
Any help would be greatly appreciated!

You are controlling all of your modals with the same piece of state and the same functions to open and close the modal.
You need to either have just one modal and then dynamically render the message inside it or you need to store a modalIsOpen variable in your state for every single modal.

react-ultimate-pagination component setup

I'm trying to use this package react-ultimate-pagination: https://github.com/ultimate-pagination/react-ultimate-pagination
I want to set it up like their basic demo example: https://codepen.io/dmytroyarmak/pen/GZwKZJ
The usage instructions at the bottom of the github page say to import the component like this:
import ReactUltimatePagination from 'react-ultimate-pagination';
But the codepen demo just shows a constant:
const UltimatePagination = reactUltimatePaginationBasic.default;
I copied the code from the demo, but since it is mismatched with the import, I have an error of UltimatePagination being undefined and reactUltimatePaginationBasic undefined.
Does anyone know how to set up this component like the demo example?

The module exports the higher oder component createUltimatePagination as a named export. To import it using es6 import syntax it has to be the following:
import {createUltimatePagination} from 'react-ultimate-pagination';
Example App:
import React, { Component } from "react";
import { render } from "react-dom";
import { createUltimatePagination } from "react-ultimate-pagination";
const Button = ({ value, isActive, disabled, onClick }) => (
<button
style={isActive ? { fontWeight: "bold" } : null}
onClick={onClick}
disabled={disabled}
>
{value}
</button>
);
const PaginatedPage = createUltimatePagination({
itemTypeToComponent: {
PAGE: Button,
ELLIPSIS: () => <Button value="..." />,
FIRST_PAGE_LINK: () => <Button value="First" />,
PREVIOUS_PAGE_LINK: () => <Button value="Prev" />,
NEXT_PAGE_LINK: () => <Button value="Next" />,
LAST_PAGE_LINK: () => <Button value="Last" />
}
});
class App extends Component {
state = {
page: 1
};
render() {
return (
<PaginatedPage
totalPages={10}
currentPage={this.state.page}
onChange={page => this.setState({ page })}
/>
);
}
}
render(<App />, document.getElementById("root"));
Also see this working example on codesandbox.
To be honest I played around with the api of that library and actually it is unclear to me how this library is intended to be used. A pagination component should receive a list of items and then provide a render prop to render the current page with a slice of these items. It's a pagination that does not paginate. Basically it's only a button bar.

Just use var ReactUltimatePagination = require('react-ultimate-pagination'); after you've installed it with npm install react-ultimate-pagination --save