Algolia Instantsearch - show real html content in react app - javascript

i configured a demo app in react with an algolia search.
I indexed some indices in algolia. The content is raw html.
Is it possible to render this content with algolia in real html?

I think, I found the solution. I thought it its possible with the escapeHTML:false parameter of agnolia itself. A code snippet how this works, would be great.
Until there is no answer. I would use the native solution of react.
const Hit = ({hit}) =>
<div className="hit>">
<div className="title">
<div dangerouslySetInnerHTML={{__html:hit.content }}></div>
</div>
</div>

Related

&#039 "It' being rendered in React

I am making an API call to: https://opentdb.com/api.php?amount=10
and getting question and answer data and then rendering them
but instead of symbols, I am getting this &#039 " It'
rendering like this
export default function Question(props){
return (
<div className="Question-wrapper">
<div className="Question--question">{props.question}</div>
<div className="Question--options">
</div>
</div>
)
}
By default, React does not allow create tags from string variables because this is too dangerous. You could use dangerouslysetinnerhtml if it is rly necessary. Please read documentation by this link https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

React Router - how to load product-specific API data into it's own page / URL?

This is my first time tackling this problem with React so please bear with me! I'd like to accomplish the following:
When a user clicks on a product, it loads that product's link containing it's specific information (image, description, etc.)
That URL would be something like 'myapp.com/product#/'
The API data is actually contained as a JSON in a local db.json file and has all the information for each product that I'd like to pull in. I'm using the Context API for managing the data.
Here's a live demo and the full project code.
This is what I have so far:
export default function MachineCard({ image, title }) {
return (
<>
<div className="col-lg-3">
<div className="card">
<Link to="/details"> <-- want this to link to product-specific page
<img className="img-fluid" src={image} alt={title} />
<div className="title">
<h2>{title}</h2>
</div>
</Link>
</div>
</div>
</>
);
}
Any idea how I can accomplish this?
Any help would be greatly appreciated!
In react router there is an option to /:id this way and it'll pick it up and render the right product or page. I have forked your demo and I have added the solution check it out and let me know if it helped.
https://codesandbox.io/s/nce-forked-nizd5?file=/src/components/MachineCard.js
Also check this react router document it will help you a lot. https://reactrouter.com/web/example/url-params

Laravel + React: Handling API Data

I'm new to react and laravel and I am trying to boost my skills during this god awful lockdown. I'm following tons of tutorials but I keep finding that they are either incomplete, have very bad english or not indepth enough and skip over things too quickly.
I don't mean to sound ungrateful, I love the fact people are sharing this information I am just really struggling to get to grips.
I am hoping someone can help me understand how to make all these components work together. I'll explain my project:
My Project
Laravel
React
JS Charts
Bootstrap
I am creating a very basic crypto currency dashboard. That will display a chart and a table of data.
Here is a wireframe:
I have created the following componenets:
sidebar
charts
table
These are referenced in the welcome.blade.php file:
return (
<div className="example">
<SideBar />
<Chart />
<Table />
</div>
);
I also created a Laraval API that links to my sqlite database. The sidebar displays a list of the crypto currencies I have in the database.
In the sidebar:
I am calling the endpoint of /crypto I get a returned JSON. This contains a list of all the cryptos in my database (only top 10 at the moment).
componentDidMount() {
fetch('/api/crypto')
.then(response => {
return response.json();
})
.then(crypto => {
this.setState({ crypto });
});
}
and then I am adding it to the state:
constructor() {
super();
this.state = {
crypto: [],
};
}
Then I am doing rendering that into a list item.
I am doing the same from the chart and the table however, they only get a specific crypto from the endpoint /api/crypto?coin=btc.
All this works fine, the data is shown in the table, the charts show correctly.
What I want to do.
I want to be able to click any of the crypto names in the sidebar, and have the chart and table data update with that specific data.
I want to be able to reduce the amount of API calls so that if I do not have to request the database 10 times
I would be extremely grateful for details answers, links and references to videos - tutorials etc...
Thank you
Firstly, I suspect that your welcome.blade.php is not where you have your
return (
<div className="example">
<SideBar />
<Chart />
<Table />
</div>
);
That is usually in a .js file.
What you need to do is something referred to as 'lifting up the state'.
This means that you take the state from your individual components, and move them up to a wrapper component.
In your App.js file. It could still be called Example.js if you have not changed it. This is where you will see the:
return (
<div className="example">
<SideBar />
<Chart />
<Table />
</div>
);
Take out all the references for state and the functions in your sidebar, chart,table component.
Add that stuff to the App.js file.
Now, when you want to pass info to those components you send them as props.
For example:
return (
<div className="example">
<SideBar tickers={tickers}/>
<Chart data={data} />
<Table data={data}/>
</div>
);
These then become what is known as Controlled Componenents and they are stateless. They only rely on the information passed to them. So when the state changes in App.js it will update the lower components.
Check out: https://www.youtube.com/user/programmingwithmosh he is really good and as you mentioned is an issue before, he has great english and very in-depth.
Good luck and well done on using the lockdown for some education and self-betterment.

EmberJS template component suddenly not rendering on page

I'm following this Ember tutorial and I've suddenly run into an issue where my rental-listing.hbs template component stops rendering. It started when I began implementing the map service.
I don't understand where this could be happening. I've copied the code from parts of the GitHub repository that I thought were relevant but to no avail.
I have a rental.hbs template that looks like so:
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
{{#link-to "about" class="button"}}
About Us
{{/link-to}}
</div>
{{outlet}}
Which in turn has a template component called rental-listing.hbs:
<article class="listing">
<a
onclick={{action "toggleImageSize"}}
class="image {{if this.isWide "wide"}}"
role="button"
>
<img src={{this.rental.image}} alt="">
<small>View Larger</small>
</a>
<div class="details">
<h3>{{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}</h3>
<div class="detail owner">
<span>Owner:</span> {{this.rental.owner}}
</div>
<div class="detail type">
<span>Type:</span> {{rental-property-type this.rental.category}} - {{this.rental.category}}
</div>
<div class="detail location">
<span>Location:</span> {{this.rental.city}}
</div>
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{this.rental.bedrooms}}
</div>
</div>
<LocationMap #location={{this.rental.city}}/>
</article>
The only thing I have added to the above is the line <LocationMap #location={{this.rental.city}}/> but it still doesn't work if I remove it.
The console shows me no errors and I can actually see I am getting the three dummy objects I want from Mirage:
So I'm definitely getting the objects and from what I see I'm doing everything necessary in the templates to render it but they aren't. Should I be looking somewhere else?
Are you able to provide a link to your example? By having each piece of the ember application you mention it would be best to answer definitely. I can give a general answer with strategies for debugging the template.
The conventions behind ember.js make understanding the "whys" frustrating at first and possibly opaque. Ember's handlebars implementation governs how values are populated and accessed within templates using very specific rules. Ember treats templates (handlebars files) differently depending on whether it is for a route or component. Component's have an isolated context and must receive values by explicit passing in or dependency injection. Then, you can use such values in a component's template by accessing those properties with {{this.somePassedInValue}}.
In the super-rentals app, it appears the rental index route invokes the components responsible for displaying the individual units. I found this in app/templates/rentals/index.hbs.
<li><RentalListing #rental={{rentalUnit}} /></li>
The route template iterates over the list of filteredResults. Each of these is the rentalUnit. A good first step would be to use the {{log}} helper to print out that the value of rentalUnit to ensure it is what you expect.
Alternatively, you could try cloning https://github.com/ember-learn/super-rentals and applying the changes you want to make step by step from the master branch. By doing so, you could easily undo a single change to see what caused something to not show up as expected.
<LocationMap #location={{this.rental.city}}/>
to be written as below
<LocationMap #location={{this.rentals.city}}/>
may be typo error.
also repeat this for there place in that template.
Because the model name in the console is rentals not rental

How to make Laravel/Vue implementation show individual entry

I'm trying to integrate Laravel with Vue, and further down the line Nuxt, in the hope that I can integrate snazzy page transitions like the ones shown on http://page-transitions.com into my websites.
I've been reading a tutorial about using Vue with Laravel; https://scotch.io/tutorials/build-a-guestbook-with-laravel-and-vuejs, and I was pleased to find that Laravel ships with a Vue implementation, so I thought there'd be quite a lot of info on how to use the two in combination, but there doesn't seem to be.
I completed the tutorial and made the guestbook as it was described. I'm now trying to build upon that.
Specifically, Im trying to create individual pages for each of the guestbook entries.
I do have quite a bit of experience using Laravel, but only what I've described above with Vue.
So, in order to create the individual pages, I've created a new route in the routes/web.php file;
Route::get('signature/{id}','SignaturesController#show')->name('signature');
I've then created a new code block in app/Http/Controllers/SignaturesController.php to deal with this request;
public function show()
{
return view('signatures.signature');
}
I've created the specified view in resources/views/signatures/signature.php;
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature></signature>
</div>
</div>
</div>
#endsection`
And I've created the vue file that should integrate with this view in resources/assets/js/components/Signature.vue;
<template>
<h1>Signature</h1>
</template>
<script>
export default {
}
</script>
Finally, I've registered the component in resources/assets/js/app.js and reran npm run dev.
This has worked to an extenet, I can view the file at the expected url; http://transitions.localhost/signature/1.
My question is, how do I get the data related to the signature with the ID of 1 into the page? I can't even echo out {{ id }} or {{ signature }}.
Any other resources that you've found helpful regarding this subject would also be greatly appreciated. Thanks for taking the time to read through all of that, does anyone know where I go from here?
You will need to pass the data to your vue component
Maybe something like this?
In your view:
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature :signature="{{ $signature }}"></signature>
</div>
</div>
</div>
#endsection
In your vue component:
<template>
<h1>This signature has the ID of: {{ signature.id }}</h1>
</template>
<script>
export default {
props: ['signature']
}
</script>

Categories