how to meteor react subscribe data bind in component? - reactjs

I am setting up a new meteor react app which subscribes new data from the server. I want to only bind data to main page component. I have following code main page componen.
import React from 'react';
import ReactDOM from 'react-dom';
import RealTime from '../../../lib/client/RealTime';
// TrackerReact is imported (default) with Meteor 1.3 new module system
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Game from '../pages/components/game';
// > React.Component is simply wrapped with TrackerReact
class MainPage extends TrackerReact(React.Component) {
// Note: In ES6, constructor() === componentWillMount() in React ES5
constructor() {
super();
this.state = {
subscription: {
tasks: Meteor.subscribe('userData')
},
data:{}
}
}
getingData(){
let data=RealTime.find().fetch();
return data;
}
render() {
const gamedata=this.getingData();
console.log(this.getingData());
return (
<div className="container ">
<div className="board-player-top">
<img className="user-pic" src="../../../../../images/player-img-top.png" alt="" title=""/>
<div className="board-player-userTagline">
<div className="user-tagline-component">
Black Name
<i>2202<img src="../../../../../images/user-flag.png" alt=""/></i>
</div>
<div className="captured-pieces">
<img src="images/small-picW-1.png" /> <img src="images/small-picW-2.png" />
</div>
<div className="clock-top">
10:00
</div>
</div>
</div>
<Game/>
<div className="board-player-bottom">
<img className="user-pic" src="../../../images/player-img-bottom.png" alt="" title=""/>
<div className="board-player-userTagline">
<div className="user-tagline-component">
Staick <i>1576<img src="../../../images/user-flag.png" alt=""/></i>
</div>
<div className="captured-pieces">
<img src="images/small-picB-1.png" /> <img src="images/small-picB-2.png" />
</div>
<div className="clock-bottom active">
10:00
</div>
</div>
</div>
</div>
)
}
};
export default MainPage
i have console.log(this.getingData()) inside render found
following data from serverside which automatically update.
Application comminucation with help of socket io other server and data publish to meteor client.application layout is following structer

You can pass data to child component using props but here you can find problem each time you have received the gamedata pass as props to child component then child component will update.
You should simantanilious pass data to each child component.

Related

How to access state/props in another jsx file

This is a whitebox.jsx file where i have a state "wbimage", it should contain an image url that will be displayed in className="wbimgframe". I want to access and edit this state i.e, give image url to "wbimage" in another jsx file - javaa.jsx
whitebox.jsx
import "./whitebox.css"
class Whitebox extends Component {
constructor(props) {
super(props);
this.state ={
wbimage: '',
};
}
render() {
return (
<div>
<div className="wbdemo" >
<div className="wbimgframe">
<center>
<img src={this.state.wbimage} alt="Given image will be displayed here"/>
</center>
</div>
<div className="wbdemobookname">
<label>Book Name</label>
</div>
<div className="wbdemobookauthor">
<i><label>By </label>
<label>Book Author</label></i>
</div>
</div>
</div>);
}
}
export default Whitebox;
I have tried this, but still nothing is displayed in image.
javaa.jsx
import Whitebox from "./whitebox";
import "./javaa.css";
class Javaa extends Component {
render() {
return (
<div>
<br/><br/><br/><br/><br/>
<div className="javaamp">
<Whitebox>
{this.props.wbimage} = "https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg"
</Whitebox>
</div>
</div>);
}
}
export default Javaa;
Please help, I am a beginner. So if this question seems easy, please don't mind :)
parent component (From where you have to send the data)
<Whitebox wbimage="https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg">
Child component (from where you are gonna receive the data and use it in your HTML.
console.log(this.props.wbimage)
Check out this to understand better https://reactjs.org/docs/components-and-props.html

Images are not loaded in react and also not giving error

I am unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />

No Set State or Async but still "Can't perform state update on unmounted component" error

I have nearly given up with this. I can't get my component to work no matter what I do. I have read all the error posts here and on Google but still nothing. I get the error
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Here is my full code...
import React, { Component } from 'react;
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';
import {
NewsFeedWidget
} from "Components/Widgets";
// widgets data
import {
newsData,
} from './data';
export default class EcommerceDashboard extends Component {
render() {
return (
<div className="ecom-dashboard-wrapper">
<div className="content_container">
<div className="row">
<div className="col-sm-6 col-md-4 w-xs-full">
<NewsFeedWidget data={newsData} />
</div>
</div>
</div>
</div>
)
}
}
and NewsFeed.js
import React, { Component, Fragment } from 'react';
const NewsFeedWidget = ({ data }) => (
<div className="cardheader_container">
<div className="notification_container">
{data && data.map((d, key) => (
<div className="a_notification" key={key}>
<div className="not_header">
<div className="not_content">
<h5>{d.title}</h5>
<p>{d.subtitle}</p>
</div>
</div>
</div>
))}
</div>
</div>
}
export default NewsFeedWidget;
Obviously I am new at React so please explain how and what issue I am having. It's gonna be something dumb I bet but this is how i'll learn.
ty
Could you upload the code for PageTitleBar too ?

Using fullpagejs in React, how to trigger function on active slide without re-rendering entire page

In my React app I am using fullpage.js to render two slides containing two different components. I want to run a function inside one of these only when it's the active slide. I tried below code, but once the state changes the entire ReactFullpage is re-rendered causing the first slide to be active again so I'm basically stuck in a loop.
My question is, how can I trigger a function inside the <Player /> component to run only if it's the active slide?
import React from "react";
import ReactFullpage from "#fullpage/react-fullpage";
import AlbumInfo from './AlbumInfo';
import Player from './Player';
class Album extends React.Component {
constructor(props){
super(props);
this.state={
playing: false
}
}
_initPlayer = (currentIndex, nextIndex) => {
if(nextIndex.index === 1) {
this.setState({playing:true})
}
}
render() {
return (
<ReactFullpage
licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
sectionsColor={["#000000"]}
afterLoad={this._initPlayer}
render={({ state, fullpageApi }) => {
return (
<div id="fullpage-wrapper">
<div className="section">
<AlbumInfo />
</div>
<div className="section">
<Player playing={this.state.playing} />
</div>
</div>
);
}}
/>
);
}
}
export default Album;
From docs:
just add the class 'active' to the section and slide you want to load first.
adding conditionally (f.e. using getActiveSection()) 'active' class name should resolve rerendering problem.
The same method/value can be used for setting playing prop.
Probably (I don't know/didn't used fullpage.js) you can also use callbacks (without state management and unnecessary render), f.e. afterSlideLoad
Update
The issue has been fixed on https://github.com/alvarotrigo/react-fullpage/issues/118.
Version 0.1.15 will have it fixed
You should be using fullPage.js callbacks afterLoad or onLeave as can be seen in the codesandbox provided on the react-fullpage docs:
https://codesandbox.io/s/m34yq5q0qx
/* eslint-disable import/no-extraneous-dependencies */
import React from "react";
import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // Optional. When using scrollOverflow:true
import ReactFullpage from "#fullpage/react-fullpage";
import "./styles.css";
class FullpageWrapper extends React.Component {
onLeave(origin, destination, direction) {
console.log("Leaving section " + origin.index);
}
afterLoad(origin, destination, direction) {
console.log("After load: " + destination.index);
}
render() {
return (
<ReactFullpage
anchors={["firstPage", "secondPage", "thirdPage"]}
sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
scrollOverflow={true}
onLeave={this.onLeave.bind(this)}
afterLoad={this.afterLoad.bind(this)}
render={({ state, fullpageApi }) => {
return (
<div id="fullpage-wrapper">
<div className="section section1">
<h3>Section 1</h3>
<button onClick={() => fullpageApi.moveSectionDown()}>
Move down
</button>
</div>
<div className="section">
<div className="slide">
<h3>Slide 2.1</h3>
</div>
<div className="slide">
<h3>Slide 2.2</h3>
</div>
<div className="slide">
<h3>Slide 2.3</h3>
</div>
</div>
<div className="section">
<h3>Section 3</h3>
</div>
</div>
);
}}
/>
);
}
}
ReactDOM.render(<FullpageWrapper />, document.getElementById("react-root"));
export default FullpageWrapper;

Can only update a mounted or mounting component. due to Router

I want to write a musicplayer with react.js. After init works ths player well.
But once I change the site with router to music list, the console show me the error:
Can only update a mounted or mounting component. This usually means
you called setState() on an unmounted component. This is a no-op.
Please check the code for the Player component
I have marked the line in code.
I think, while I am changing the site, the player component may be unmounted. But wihtout the componentWillUnmount function, nothing different.
Here is my project.
Thanks in advance!
player.js
import React, {Component} from 'react';
import '../../styles/player.less';
import Progress from '../commen/progress.js';
import {Link} from 'react-router-dom';
let duration = null;
export default class Player extends Component {
constructor(props){
super(props);
this.state={
progress: 0,
volume: 0,
isPlay: true,
},
this.play=this.play.bind(this);
this.progressChangeHandler=this.progressChangeHandler.bind(this);
this.volumeChangeHandler=this.volumeChangeHandler.bind(this);
}
componentDidMount(){
$('#player').bind($.jPlayer.event.timeupdate,(e)=>{
duration = e.jPlayer.status.duration;//total duration of the song
this.setState({//here is the problem !!!!!!!!!!!!!!!!!!!!!!!
volume: e.jPlayer.options.volume*100,
progress:e.jPlayer.status.currentPercentAbsolute
});//how lange already played
});
}
componentWillUnMount(){
//$('#player').unbind($.jPlayer.event.timeupdate);
}
//从子组件中获得值
//change progress
progressChangeHandler(progress){
$('#player').jPlayer('play', duration * progress);
}
//change volume
volumeChangeHandler(progress){
$('#player').jPlayer('volume', progress);
}
//play pause switcher
play(){
if(this.state.isPlay){
$('#player').jPlayer('pause');
}else{
$('#player').jPlayer('play');
}
this.setState({
isPlay: !this.state.isPlay,
})
}
render(){
return(
<div className="player-page">
<h1 className="caption">
<Link to="/list">My Favorite Music</Link>
</h1>
<div className="mt20 row">
<div className = "controll-wrapper">
<h2 className="music-title">{this.props.currentMusicItem.title}</h2>
<h3 className="music-artist mt10">{this.props.currentMusicItem.artist}</h3>
<div className="row mt20">
<div className="left-time -col-auto">-2:00</div>
<div className="volume-container">
<i className="icon-volume rt"></i>
<div className="volume-wrapper">
<Progress
progress={this.state.volume}
onProgressChange={this.volumeChangeHandler}
barColor="#aaa"></Progress>
</div>
</div>
</div>
<div className="progress-container">
<Progress
progress={this.state.progress}
onProgressChange={this.progressChangeHandler}>
</Progress>
</div>
<div className="mt35 row">
<div>
<i className="icon prev"></i>
<i className={`icon ml20 ${this.state.isPlay ? 'pause' : 'play'}`} onClick={this.play}></i>
<i className="icon next ml20"></i>
</div>
<div className="-col-auto">
<i className="icon repeat-cycle"></i>
</div>
</div>
</div>
<div className="-col-auto cover">
<img src={this.props.currentMusicItem.cover} alt={this.props.currentMusicItem.title}/>
</div>
</div>
</div>
/**<div className="player-page">
<Progress progress={this.state.progress} onProgressChange={this.progressChangeHandler}></Progress>
</div>**/
)
}
}
root.js
import React, {Component} from 'react';
import Header from './commen/header.js';
import Player from './page/player.js';
import {MUSIC_LIST} from '../config/musiclist';
import MusicListUI from './page/musiclistui.js';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
export default class Root extends Component{
constructor(props){
super(props);
this.state={
musiclist: MUSIC_LIST,
currentMusicItem: MUSIC_LIST[0]
}
}
componentDidMount(){
$('#player').jPlayer({
ready:function(){
$(this).jPlayer('setMedia',{
mp3:'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3'
}).jPlayer('play');
},
supplied:'mp3',
wmode: 'window'
});
}
render(){
const Home=() => (
<Player
currentMusicItem={this.state.currentMusicItem}
/>
);
const List = () => (
<MusicListUI
currentMusicItem={this.state.currentMusicItem}
musiclist={this.state.musiclist}
/>
);
return(
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/list" component={List}/>
</Switch>
</div>
</Router>
)
}
}
Error sums it up well. When you change the route component gets unmounted and callback tries to setState on unmounted component. You have to figure out how to do clean up before this happens. I see you already figured out that you can use componentWillUnmount, but you have a typo:
componentWillUnMount(){ // should be componentWillUnmount!
//$('#player').unbind($.jPlayer.event.timeupdate);
}
Notice also that bind method has been deprecated.
Router is not your issue. Your issue is that you are fighting a fundamental design paradigm of React... or perhaps common sense. You are not supposed to try and perform operations on components that don't currently don't exist. What would that accomplish? In your case, you have a bunch of event listeners that you haven't removed.
As a side note, you are using an incredible amount of jQuery. You should be using this.setState as often as you can. You're programming in a style that goes against some of the best aspects of React.

Resources