I need someone to help me view this code, onclick in is not changing the display states value, the code is suppose to provide random arrays of quote and names, passing the props to but this is not going through, even when i click the button
const Provider = ReactRedux.Provider;
console.log(Provider,"l")
const connect = ReactRedux.connect;
const InitialState = [
{quote:"the man who goes home late, know's why he came back home late",name:'David'},
{quote:"Opportunity comes once in a life time",name:'Eminem'},
{quote:"Beards stay but people come and go",name:'Dreplica'},
{quote:"integration in times of miss-understanding brings understanding",name:'Dreplica'},
{quote:"You just might not be lucky, Lifes short",name:'Ellie'},
{quote:"If you had told me about it, I would have never tried in the first place",name:'David'},
{quote:"Consistency in business is the key, but remember your location matters",name:'Light Spaces'},
]
const NEXT = "NEXT"
const CHANGE = ()=>{
return {
type:NEXT
}
}
/*const BACK = ()=>{
return {
type:PREVIOUS,
}*/
//values to be passed in state array are objects
//console.log(InitialState[0])
const Reducer = (state=InitialState,action)=>{
//const data = [...state];
const index = Math.floor(Math.random()*(state.length))
switch(action.type){
case NEXT:
return state[index];
default:
return state;
}
}
//console.log(Reducer(InitialState,CHANGE()))
const store = Redux.createStore(Reducer);
//store.dispatch(CHANGE(InitialState))
store.subscribe(()=>"hello");
//console.log(store.getState())
//console.log(Stat)
const Display=({quote,name})=><div>
<blockqoute>{quote}</blockqoute>
<p>{name}</p>
</div>
class App extends React.Component{
constructor(props){
super(props)
}
render(){
const {quote,name} = this.props
return (
<div>
<Display quote={quote} name={name}/>
<button onclick={()=>this.props.change}>{quote}hello</button>
</div>
)
}
}
const mapStateToProps=(state)=>{
return {quote:state.quote,
name:state.name}
}
const mapDispatchToProps=(dispatch)=>{
return {change:dispatch(CHANGE)}
}
connect(mapStateToProps,mapDispatchToProps)(App);
ReactDOM.render(<Provider store={store}>
<App/>
</Provider>,document.getElementById('react-container'))
at <display> the states {quote,names} is supposed to be passed
when <button> in <App> is clicked, but rather nothing happens
one of the initial problems I can see is your not re-assigning App to be the connected version of itself.
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App)
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,
document.getElementById('react-container')
)
i tried it sir, but it still didnt go through, or was i just suppose to do this
<ConnectedApp /> and forget <Provider store={store}> <ConnectedApp /> <App/> </Provider>,
?
I’m still trying to play around with your code trying to figure out why your mapDispatchToProps isn’t working, but like I said that was only problem. Another is the state your using. Your initial state is the entire array of quotes, and not a single quote, which is the way your current App is set up to expect.
I used initialState so it can output a default random quote anytime the
code runs, if you take a look i passed [...state[index]] to output a fresh
result when the action type is true…
I just tried that process you gave and included my code…<Provider store={store}> <ConnectedApp /> <App/> </Provider>
its perfectly working now, Thanks
But still my onclick event is not rendering
yeah I just finally noticed that you have onclick and not onClick the C needs to be capitalized.
try running it in a code pen including all libraries from babel down to react-redux,
and see the error message… I can’t pin point what "quote"is undefined
You starting state as previously mentioned is an array, it is only if the button is clicked that you get and index of that array, but you then no longer have a reference to the array because the state was replaced with that one entry from it.
yes i corrected that state={quote:' ',name:' '}, it gives me my result but when i click on the button it says …react-dom.production.min.js:12 Uncaught Error: Minified React error #231; visit
okay, button onclick={() => this.props.change()}>{quote}hello</button>
did you include that parens after change?
i rewrote the code, here it is
//my first react project
const InitialState = [
{quote:"the man who goes home late, know's why he came back home late",name:'David'},
{quote:"Opportunity comes once in a life time",name:'Eminem'},
{quote:"Beards stay but people come and go",name:'Dreplica'},
{quote:"integration in times of miss-understanding brings understanding",name:'Dreplica'},
{quote:"You just might not be lucky, Lifes short",name:'Ellie'},
{quote:"If you had told me about it, I would have never tried in the first place",name:'David'},
{quote:"Consistency in business is the key, but remember your location matters",name:'Light Spaces'},
]
const NEXT = "NEXT";
const CHANGE = (run)=>{
return {
type:NEXT,
run:[...run]
}
}
/*const BACK = ()=>{
return {
type:PREVIOUS,
}*/
const index = Math.floor(Math.random()*(InitialState.length-1))
//values to be passed in state array are objects
//console.log(InitialState[0])
const Reducer = (state={quote:"",name:''},action)=>{
//const data = [...state];
switch(action.type){
case NEXT:
return action.run[index];
default:
return state;
}
}
//console.log(Reducer(InitialState,CHANGE()))
const store = Redux.createStore(Reducer);
//store.dispatch(CHANGE(InitialState))
//store.subscribe(()=>"hello");
//console.log(store.getState())
const Display=({quote,name})=><div>
<p>{quote}</p>
<p>{name}</p>
</div>
class App extends React.Component{
constructor(props){
super(props)
}
render(){
const {quote,name,change} = this.props
return (
<div>
<Display quote={quote} name={name}/>
<button onClick={change}>Change</button>
</div>
)
}
}
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
const mapStateToProps=(state)=>{
return {quote:state.quote,
name:state.name}
}
const mapDispatchToProps=(dispatch)=>{
return {change:dispatch(CHANGE(InitialState))}
}
const ConnectedApp = connect(mapStateToProps,mapDispatchToProps)(App);
ReactDOM.render(<Provider store={store}>
<ConnectedApp />
<App/>
</Provider>,document.getElementById('react-container'))
thanks alot my friend, I’ve done it
the mistake was my index, i mistakenly declared it outside the reducer, therefore it was fixed to just a number, so whenever i click it returns that same value
okay, well to start with you can remove the <App /> from your Provider tags, just need the connected one,
also
const mapDispatchToProps = dispatch => {
return {
change: () => dispatch(CHANGE(InitialState))
}
}
needs to return a function. You where calling the function and passing the results
yes i made those changes, is all okay
1 Like
good luck with the rest of it
1 Like
hey Morse, I’ve been trying to get onKeyPress to work on react but its
going through
Generally onKeyPress, onKeyUp, or onKeyDown will only be attached to some sort of form element.
<input type="text" onKeyPress={(event) => console.log(event.key)} />
if you specificly need the keypress from the window you will have to go about it a different way. I’ve included a couple examples on CodeSandbox.
1 Like