We Keep Coding

LWC: What's wrong with the Wire Return code?

Problem is with this line in JS code inside result function-
return this.wirestoredrecords.data.LastName;
I am trying to get the Contact Fields Values using Getter and display in the HTML. PLS HELP.
**JS CODE:**
import { api, LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import Name from '#salesforce/schema/Contact.Name';
import LastName from '#salesforce/schema/Contact.LastName';
import Phone from '#salesforce/schema/Contact.Phone';
const contactfields = [Name, LastName, Phone];
export default class WireGetRecords extends LightningElement {
#api recordId;
datavalue;
#wire(getRecord, { recordId: '$recordId', fields: contactfields })
wirestoredrecords;
get result(){
return this.wirestoredrecords.data.LastName;
}
}
**HTML CODE:**
<template>
<lightning-card>
<div>{recordId}</div>
<div>{result}</div>
<div></div>
</lightning-card>
</template>```

Your component loads to the page and the #wire is called.
The component doesn't wait for #wire to finish, it'll be done when it'll be done, asynchronous. Your component carries on.
It encounters the html rendering, calls your getter. Well, the variable is undefined/null at that point, #wire didn't return yet. The code tries to do null.data and throws because null/undefined doesn't have fields.
Boom, headshot.
Put some null checking in the getter or use the ?. operator

Why am I unable to access the data property on this object?

I am working on my first React project and in this project I'm storing images on MongoDB. (Not best practice, I know, but regardless...)
My mongoDB object has a number of properties, including one property called "coverImage" which is an object that holds two properties: type & data, which looks like this: {Type: buffer, data: Array(6450).
I'm having trouble accessing the data property. When logging to the console the value of the data property within axios, the buffer is logged to the console without issue.
Meanwhile, when attempting to access this value, which was stored in state, I receive a TypeError: "Cannot read property data of undefined"
What am I doing wrong?
Please see my code below:
import React, { Component } from "react";
import axios from "axios";
// import BookCover from "../utilities/BookCover";
class BookPage extends Component {
constructor(props) {
super(props);
this.state = {
book: ""
};
}
componentDidMount() {
axios
.get("http://localhost:3000/books/" + this.props.match.params.id)
.then(res => {
console.log("first object", res.data.coverImage); // Returns fist object, {type: Buffer, data: Array(6450)}
console.log("buffer", res.data.coverImage.data); // Returns buffer (6450) [255, 216 ...]
this.setState({
book: res.data
});
});
}
bookDetails() {
console.log("second object", this.state.book.coverImage); // Returns second object, {type: Buffer, data: Array(6450)}
// console.log(this.state.book.coverImage.data); // Returns TypeError: "Cannot read property data of undefined"
return (
<div>
<h1>{this.state.book.title}</h1>
<p>Author: TBD</p>
<p>Publish Date: {this.state.book.publishDate} </p>
<p>Need to Read: {String(this.state.book.unread)} </p>
<p>Page Count: {this.state.book.pageCount} </p>
<p>Description: {this.state.book.description} </p>
</div>
);
}
render() {
return (
<div>
<div>{this.bookDetails()}</div>
</div>
);
}
}
export default BookPage;

Browser error says "Cannot add property *, object is not extensible" - Even though property does exist in the class definition

I using React w/Sails.js backend. I think this question really only pertains to React/javascript.
I am getting the following browser console error even though the property being changed does exist in the object:
Cannot add property *, object is not extensible
Below is the class definition and the error occurs in the use of:
onExchangeSelect={selectedExchange => this.setState({selectedExchange})
in the render function below. That is, the browser complains the object is not extensible and gives that lines as the reason (and when I remove the onExchangeSelect function the error goes away).
class ExchangeContainer extends Component {
constructor(props) {
super(props);
this.state = {
exchanges:[
{
name:"binance",
url:"https://bittrex.com"
},
{
name:"bittrex",
url:"https://bittrex.com"
}
],
selectedExchange:null
};
}
render() {
return (
<div className="ExchangeContainer list-group">
<ExchangeList
exchanges={this.state.exchanges} selected={this.state.selectedExchange}
onExchangeSelect={selectedExchange => this.setState({selectedExchange}) }
/>
<ExchangeDetail exchange={this.state.selectedExchange} />
</div>
);
}
}
My question, what might be causing the error and subsequent failure for the React component to render? Why can't I change that property?

Try to spread/copy the object (otherwise, it is just using same memory location).
onExchangeSelect={selectedExchange =>
this.setState({
selectedExchange: {...selectedExchange}
})
}

How can I pass an object from container to class in Meteor and React?

I'm trying to get a value in an object of javascript but it fails somehow. I managed to get an intended data from mongoDB by findOne method. Here is my code and console log.
const title = Questions.findOne({_id: props.match.params.id});
console.log(title);
Then console says:
Object {_id: "bpMgRnZxh5L4rQjP9", text: "Do you like apple?"}
What I wanna get is only the text in the object. I have already tried these.
console.log(title.text);
console.log(title[text]);
console.log(title["text"]);
console.log(title[0].text);
But I couldn't access to it... The error message is below.
Uncaught TypeError: Cannot read property 'text' of undefined
It sounds super easy but I couldn't solve by my self. Could anyone help me out?
Additional Context
I'm using Meteor and React. I would like to pass the text inside of the object from the container to the class. I would like to render the text in render(). But it doesn't receive any data from the container... The console.log in the container works well and shows the object.
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Questions } from '../../api/questions.js';
import PropTypes from 'prop-types';
import { Answers } from '../../api/answers.js';
import ReactDOM from 'react-dom';
import { Chart } from 'react-google-charts';
class MapClass extends React.Component{
handleAlternate(event){
event.preventDefault();
const country = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Answers.insert({
country,
yes: false,
question_id:this.props.match._id,
createdAt: new Date(), // current time
});
ReactDOM.findDOMNode(this.refs.textInput).value = '';
}
handleSubmit(event) {
event.preventDefault();
const country = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Answers.insert({
country,
yes: true,
question_id: this.props.match.params.id,
createdAt: new Date(), // current time
});
ReactDOM.findDOMNode(this.refs.textInput).value = '';
}
constructor(props) {
super(props);
this.state = {
options: {
title: 'Age vs. Weight comparison',
},
data: [
['Country', 'Popularity'],
['South America', 12],
['Canada', 5.5],
['France', 14],
['Russia', 5],
['Australia', 3.5],
],
};
this.state.data.push(['China', 40]);
}
render() {
return (
<div>
<h1>{this.props.title.text}</h1>
<Chart
chartType="GeoChart"
data={this.state.data}
options={this.state.options}
graph_id="ScatterChart"
width="900px"
height="400px"
legend_toggle
/>
<form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
<input
type="text"
ref="textInput"
placeholder="Type to add new tasks"
/>
<button type="submit">Yes</button>
<button onClick={this.handleAlternate.bind(this)}>No</button>
</form>
</div>
);
}
}
export default MapContainer = createContainer(props => {
console.log(Questions.findOne({_id: props.match.params.id}));
return {
title: Questions.findOne({_id: props.match.params.id})
};
}, MapClass);

The problem here is that at the moment when the container is mounted, the data is not yet available. Since I do not see any subscriptions in your container I assume that you handle that elsewhere and thus there is no way of knowing when the data is ready. You have 2 options.
1) move the subscription into the container and use the subscription handle ready() function to assess if the data is ready. Show a spinner or something while it is not. Read this.
2) use lodash/get function (docs) to handle empty props. You would need to
npm install --save lodash
and then
import get from 'lodash/get';
and then in your class render method:
render() {
const text = get(this.props, 'title.text', 'you-can-even-define-a-default-value-here');
// then use `text` in your h1.
return (...);
}
Does this work for you?

Vuex how to Access state data on component mounted or created hook?

I'm trying to create a Quill.js editor instance once component is loaded using mounted() hook. However, I need to set the Quill's content using Quill.setContents() on the same mounted() hook with the data I received from vuex.store.state .
My trouble here is that the component returns empty value for the state data whenever I try to access it, irrespective of being on mounted() or created() hooks. I have tried with getters and computed properties too. Nothing seems to work.
I have included my entry.js file, concatenated all the components to make things simpler for you to help me.
Vue.component('test', {
template:
`
<div>
<ul>
<li v-for="note in this.$store.state.notes">
{{ note.title }}
</li>
</ul>
{{ localnote }}
<div id="testDiv"></div>
</div>
`,
props: ['localnote'],
data() {
return {
localScopeNote: this.localnote,
}
},
created() {
this.$store.dispatch('fetchNotes')
},
mounted() {
// Dispatch action from store
var quill = new Quill('#testDiv', {
theme: 'snow'
});
// quill.setContents(JSON.parse(this.localnote.body));
},
methods: {
setLocalCurrentNote(note) {
console.log(note.title)
return this.note = note;
}
}
});
const store = new Vuex.Store({
state: {
message: "",
notes: [],
currentNote: {}
},
mutations: {
setNotes(state,data) {
state.notes = data;
// state.currentNote = state.notes[1];
},
setCurrentNote(state,note) {
state.currentNote = note;
}
},
actions: {
fetchNotes(context) {
axios.get('http://localhost/centaur/public/api/notes?notebook_id=1')
.then( function(res) {
context.commit('setNotes', res.data);
context.commit('setCurrentNote', res.data[0]);
});
}
},
getters: {
getCurrentNote(state) {
return state.currentNote;
}
}
});
const app = new Vue({
store
}).$mount('#app');
And here is the index.html file where I'm rendering the component:
<div id="app">
<h1>Test</h1>
<test :localnote="$store.state.currentNote"></test>
</div>
Btw, I have tried the props option as last resort. However, it didn't help me in anyway. Sorry if this question is too long. Thank you for taking your time to read this. Have a nice day ;)

I copied your code and tested it ( of-course I created my own dummy notes so I could remove the get request ) and I was able to get the notes display on a page.
A couple of things that I realized from your code, you may need to add a store property as there are places in your component ( test ) where you are referencing it, yet you only define it on the 'app' component. So in this section of your code modify as shown below:
props: ['localnote'],
data() {
return {
localScopeNote: this.localnote,
store : store
}
},
The key difference is the definition of the 'store' property. Please note that, what you have done, defining a "store" property in your app component, is correct, but the very same needs to be defined in "test" component as I have shown in the above code snippet above.
Second thing is, you are using $store and I guess that gives you undefined, unless as you said, in the libraries that you included this resolves accordingly, but on my side I had to remove all references of "$store" and replace it with just "store" (without the dollar sign).
Lastly for testing purposes, I would advise you to also