Hi the previous answers to similar Questions doesn't help me.
I have the App Component:
import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";
class App extends React.Component {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
condition: true
};
}
onButtonClick() {
console.log("clicked...");
this.setState({
condition: !this.state.condition
});
}
render() {
return (
<div className="App">
<Header />
<Menu condition={this.state.condition} />
<Board />
</div>
);
}
}
export default App;
the MenuIcon Component:
import React from "react";
import "../css/main.css";
class MenuIcon extends React.Component {
render() {
return (
<div className="Menu_icon" onClick={this.props.onButtonClick}>
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
</div>
);
}
}
export default MenuIcon;
and the Menu Component
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
and the Header Component
import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";
class Header extends React.Component {
render() {
return (
<div className="Header_container">
<MenuIcon onButtonClick={this.props.onButtonClick} />
<div className="Header_headline">Notes</div>
</div>
);
}
}
export default Header;
I want to trigger the onButtonClick defined in App.js every time when I click on the MenuIcon. And then the Menu should fade in or out. The animation is done with css.
I dont find my mistake?
Could someone please help me?
Related
I have a Button.js component and I am using it on multiple locations on my app. How can I add the button value such as <button>hello world</button> when I am importing it on my Dashboard.js component?
Button.js
import React, { Component } from "react";
import './Button.css'
class Button extends Component {
render() {
return (
<button></button>
);
}
}
export default Button;
Dashboard.js
import React, { Component, useMemo, useState } from "react";
import Button from "../Button/Button";
import SearchBox from "../SearchBox/SearchBox";
import "./Dashboard.css";
import fire from "../../fire";
import UserList from "./UserList";
class Dashboard extends Component {
render() {
return (
<div>
<Button/>
</div>
);
}
}
export default Dashboard;
You can pass a value to Button component in two ways
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button>Hello world</Button>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.children}</button>
);
}
}
or
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
Pass the value in as a prop.
In the Dashboard component:
class Dashboard extends Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
In the button component:
class Button extends Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
send text via props
Button.js
class Button extends Component {
render() {
return (
<button>{this.props.text}</button>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<div>
<Button text={'Here is your custom text'}/>
</div>
);
}
}
class Button extends Component {
constructor(props: any) {
super(props);
}
render() {
return (
<button>
{this.props.children}
</button>
);
}
}
class Dashboard extends Component {
render() {
return (
<div>
<Button>
hello world
</Button>
</div>
);
}
}
i have an app component where map over my data an return a component, I want to make app the homepage that displays the component i return
import React, { Component } from "react";
import data from "./data";
import Asteriods from "./components/Asteroids";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import "./App.css";
class App extends Component {
state = {
// calculations: [],
asteroids: data,
};
render() {
return (
<div className="space">
<Header />
{this.state.asteroids.map((item) => (
<Asteriods key={item.id} item={item} />
))}
</div>
);
}
}
export default App;
I also have a component that where i want to link to that other component and still pass props to the stock component
import React, { Component } from "react";
import Stock from "./Stock";
class AsteroidDetails extends Component {
render() {
return (
<div className="popup">
<div className="popup\_inner">
<button onClick={this.props.closePopup}>X</button>
<p> - Name: {this.props.asteroid.name}</p>
<p> - Type: {this.props.asteroid.type}</p>
<p> - Mass: {this.props.asteroid.mass}</p>
Link to vieuw stock
<Stock
// chemPerDay={this.props.chemPerDay}
{...this.props}
// remainingMassPerday={this.props.remainingMassPerday}
// asteroidYieldPerDay={this.props.asteroidYieldPerDay}
// remainingMpct={this.props.remainingMpct}
/>
</div>
</div>
);
}
}
export default AsteroidDetails;
how can i use react router in both of these cases ?
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResult from '../SearchResult/SearchResult';
import PlayList from '../PlayList/PlayList';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {searchResult: [{name: 'The Real Slim Shady', album: 'Marshal Matters LP', artist: 'Eminem', id: 1},
{name: 'Shizzle', album: 'My Dizzle', artist: 'Snoop Dogg', id: 1}]
}
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar />
<div className="App-playlist">
<SearchResult searchResult={this.state.searchResult} />
<PlayList />
</div>
</div>
</div>
);
}
}
export default App;
--------------------------------------------------------------------------
import React from 'react';
import './SearchResult.css';
import TrackList from '../TrackList/TrackList'
class SearchResult extends React.Component {
render() {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResult} />
</div>
)
}
}
export default SearchResult;
-------------------------------------------------------------------
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.props.tracks.map(track => {
return <Track key={track.id} track={track} />
})}
</div>
)
}
}
export default TrackList;
So I'm passing the state to a child element and than I'm trying to render it as props and I'm getting an error.
Error: Objects are not valid as a React child (found: object with keys {name, album, artist, id}). If you meant to render a collection of children, use an array instead.
I'm lost and there are couple similar problems on Google but I can't work it out. Pls Help.
I am getting an "TypeError: this is undefined" error even after I am binding this to the function in the constructor. I have also tried to use handleChange={this.handlChange.bind(this)} instead of this.handleChange = this.handleChange.bind(this) but it doesn't work. I am watching React tutorial and I wrote the same code as the tutor did, the code is working fine in his IDE but is showing error in mine.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
class App extends React.Component {
render(){
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
}
export default App;
MainContent.js
import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"
class MainContent extends Component
{
constructor()
{
super()
this.state =
{
tasks: tasks
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(completed)
{
alert(completed)
}
render()
{
const taskComponents = this.state.tasks.map(function(data)
{
return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
})
return (
<div>
{taskComponents}
</div>
)
}
}
ListItem.js
import React from "react"
let i=1;
class ListItem extends React.Component
{
render()
{
return (
<div>
<p style={{color : i%2 ? "black" : "orange"}}>
<input type="checkbox" checked={this.props.completed}
onChange={function(){
this.props.handleChange(this.props.completed)
}}>
</input> Task {i++} : <b>{this.props.task}</b>
</p>
</div>
)
}
}
export default ListItem
I am trying to follow this tutorial to create a pagination in my application https://www.npmjs.com/package/react-js-pagination#usage . The pagination part works fine. How to create previousPageClick, nextPageClick functions for the course component so the page will display different set of records based on the page number? Thanks.
My App.js code:
import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Pagination from "react-js-pagination";
require("bootstrap-less/bootstrap/pagination.less");
class App extends Component {
constructor() {
super();
this.state ={
courses:[],
activePage: 15
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({courses:response.data});
});
}
handlePageChange(pageNumber) {
this.setState({activePage: pageNumber});
}
render() {
const courses= this.state.courses.map(course=>(<Course ID={course.ID} coursename={course.coursetitle} />));
const totalCourses=courses.length;
return (
<div className="App">
<div className="pagination">
Total Classes: {totalCourses}
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={100}
totalItemsCount={totalCourses}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
<div className="Course">Courses: {courses}
</div>
</div>
);
}
}
export default App;
ReactDOM.render(<App />, document.getElementById("root"));
Course.js
import React from 'react';
const course=props=>{
return(
<div className="Course">
<p>ID: {props.ID}</p>
<p>SUBJECT: {props.SUBJECT}</p>
</div>
);
}
export default course;