Develop Reference

How to insert text programmaticaly into draft js rich text field while maintaining the current inline style?

When I click on a button with a certain symbol, I'd like it to put the symbol in the text field.
To achieve that I use a function for text insertion:
insertText(characterToInsert) {
let editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent(),
currentSelection = editorState.getSelection();
let newContent = Modifier.replaceText(
currentContent,
currentSelection,
characterToInsert
);
return EditorState.push(editorState, newContent, 'insert-characters');
}
I'd like it to put a subscript text there when the subscript inline style is on.
I tried to do something like
if (this.isSubscriptOn()) {
newContent = Modifier.applyInlineStyle(newContent, currentSelection, 'SUBSCRIPT');
}
however, I don't know how to alter the second argument so that the selection is targeting the newly placed characters.
Is there a better way to approach this?

The first step is to use the applyInlineStyle: function (contentState: ContentState, selectionState: SelectionState, inlineStyle: string) function of the static Modifier class. As you can see - it requires a selection of the area which we want our style to be applied to. We'll create such style by using the set method from immutable.js:
const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);
Then we'll get the OrderedSet of current inline styles and apply each of them to the aformentioned selection:
let inlineStyles = editorState.getCurrentInlineStyle();
inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));
If we stop right here the text would be put into the input field while being selected (blue rectangle would appear around it). To avoid such behavior let's force a selection to the end of the inserted text:
newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));
The whole function looks like this:
insertText(textToInsert) {
let editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent();
const currentSelection = editorState.getSelection();
let newContent = Modifier.replaceText(
currentContent,
currentSelection,
textToInsert
);
const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);
let inlineStyles = editorState.getCurrentInlineStyle();
inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));
let newState = EditorState.push(editorState, newContent, 'insert-characters');
newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));
return newState;
}

How can I remove occurrences with random hash?

I have a controlled <input /> in my React application where the user would type.
I want to keep track on it and replace the occurrences of $.text and $.lang to random hashes/number.
from
let string = 'I may have multiple $.text and $.lang like $.textand$.lang';
I want all occurrences of $.text and $.lang to have a random number(or anything unique):
to
updatedString = 'I may have multiple 123 and 245 like 744and111';
What I have done so far
let temp = value.split('').reverse().join(''); // reverse it to find the latest occurrence
let reText = /txet.\$/i;
let reLang = /gnal.\$/i;
let updated;
if (value.includes('$.text')) {
updated = temp.replace(reText, `${hash}#`); // replace the latest occurrence
} else {
updated = temp.replace(reLang, `${hash}#`); // replace the latest occurrence
}
updatedValue = updated.split('').reverse().join(''); // re reverse it
The issue is it replaces the but onChange RESETS the input state and it only changes the last occurrence of it.

So im doing it on click. So lets say user type something and then clicking on Replace Template button will replace the $.text and $.lang by some random number. You can insert your specific hash or number if needed.
const replaceTemplateByRandom = (val, temp) => {
while(val.indexOf(temp) != -1){
const numb = Math.floor(Math.random()*1000);
val = val.replace(temp, numb);
}
return val;
}
inside this arrow function I'm running the while loop till we find the template to replace, and replace occurrence by random number.
const replaceTemplateByRandom = (val, temp) => {
while(val.indexOf(temp) != -1){
const numb = Math.floor(Math.random()*1000);
val = val.replace(temp, numb);
}
return val;
}
function App(props){
const [val, setVal] = React.useState('default text is $.text, and language is $.lang.');
const updateVal = (e) => {
const newVal = e.target.value;
setVal(newVal);
}
const replaceTemplate = ()=>{
let currentVal = val;
currentVal = replaceTemplateByRandom(currentVal, '$.text');
currentVal = replaceTemplateByRandom(currentVal, '$.lang');
setVal(currentVal);
}
return <div>
<input type="text" value={val} onChange={updateVal} style={{"width":"100%"}}/>
<button onClick={replaceTemplate}>Replace Template</button>
</div>;
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

You can make use of .replace()'s acceptance of a function for custom and dynamic substitution:
function myHashFunction(match)
{
// Uncomment this line to see the various matches coming through
//console.log(match);
// I'm just returning a random number, you need to change this to your hash algorithm
return Math.floor(Math.random() * Math.floor(999999999999));
}
let str = `I may have multiple $.text and $.lang like $.textand$.lang`;
console.log(str.replace(/\$\.(?:text|lang)/g, myHashFunction));

function myFunction() {
var theString = "How are $.you doing $.you today?";
var splitString = theString.split("$.you");
var joinedString = "";
for(index = 0; index < splitString.length-1; index++){
joinedString += splitString[index] + Math.random();
}
document.getElementById("demo").innerHTML = joinedString;
}
Something simple like this could probably do the job.
So spliting the string into an array of strings and then joining it back with a specific string.
Not React specifically, but the idea is there.

How to index similar object values and show it beside them? Javascript/React/ES6

I am currently receiving object segregatedData as props. This object contains several properties but the one we will focus on is segregatedData.type1 Basically this is just an array of strings like this ['water','fire','water',earth'] What I'd like to is to be able to print out each string and then beside it is how many instances this value has been repeated. So in the example case the expected output would be water-2, fire-1, earth-1 Of course we'd have to delete the duplicates.
Here's what I have so far:
import React from "react";
import { Typography } from "#material-ui/core";
function TypesText(props) {
const { segregatedData } = props;
return (
<>
<Typography>Type1:</Typography>
{segregatedData.length && segregatedData.map((data) => data.type1 + " ")}
</>
);
}
export default TypesText;
Fairly basic, it just prints every type1 property with a blank string as its seperator. Anything that can point me in the right direction is appreciated.

use segregatedData.type1.reduce to output array that finds occurrence in output array via mapping it and using string.search to find occurrence and then incrementing integer at the end.
Take a look at following code sample. test it
const arr = ['water','fire','water', 'earth'];
let val = arr.reduce((resultarr, item) => {
const val = resultarr.find(item1 => item1.search(item) !== -1)
const ind = resultarr.findIndex(item1 => item1.search(item) !== -1)
if (val == undefined) {
resultarr.push(item + "-" + 1)
}
else {
const i = val.search("-")
const num = parseInt(val.substring(i+1))
const nval = item + "-" + (num+1)
resultarr[ind] = nval;
}
return resultarr
}, [])
alert(val);

Javascript: render a list of components

Suppose I have
const bold = content => <b>{content}</b>;
const aside = content => <aside>{content}</b>;
Now, I write:
aside("hello world");
And everything performs correctly.
Next, suppose I want to render a list of components in aside:
const bold = content => <b>{content}</b>;
const aside_items = ???
Such that when I write:
aside_items([bold("hello"), bold("world")]);
The following HTML is produced:
<aside>
<b>hello</b>
<b>world</b>
</aside>
How does one implement const aside_items = ????

Not sure if you are using JSX, but if not you could use Template literals and then just join array items to string.
const bold = content => `<b>${content}</b>`;
const aside_items = content => `<aside>${content.join('')}</aside>`
const items = aside_items([bold("hello"), bold("world")]);
document.body.innerHTML += items;

This will iterate over the items array and return a string of HTML markup:
const aside_items = (items) => {
let arr = [];
for (let i in items) {
arr.push(items[i]);
}
return '<aside>' + arr.join('') + '</aside>';
}

Using React, how do I make the value of my variable dynamic?

I want to be able to do this:
for(let i = 0; i < this.props.user.cart.length; i++) {
return (
<div>
{"products.desserts." + this.props.user.cart[i] + ".name"}
</div>
);
}
And have JSX read it as a call to my json. Instead, it just spits out a string.
The string it gives is products.desserts.cakes.cake1.name, which is correct if it would actually access the name in my json file.
I've seen some stuff about dynamic variable names and I'm not completely sure if that's the right direction to go since I keep getting errors when attempting it.
(Very new to React by the way)

You can access an object key with strings instead of a dot . .
for(let i = 0; i < this.props.auth.cart.length; i++) {
return (
<div>
{products.desserts[this.props.user.cart[i].name]}
</div>
);
}
Edit
As a followup to your comment:
I want it to be accessing "products.desserts.cakes.cake1.name"
This cakes.cake1 is not a valid key for an object, hence you would need to split the . of the value in your array and use double brackets.
So in your case:
{
const splitedKeys = this.props.user.cart[i].split(".");
const key1 = splitedKeys[0];
const key2 = splitedKeys[1];
products.desserts[key1][key2].name
}
A simple example:
const products = {
desserts: {
cakes: {
cake1: {
name: 'cake 1'
},
cake2: {
name: 'cake 2'
}
}
}
}
const cart = ['cakes.cake1', 'cakes.cake2'];
cart.forEach((val) => {
const splitedKeys = val.split('.'); // split the values by the "."
const key1 = splitedKeys[0] // left side of the "."
const key2 = splitedKeys[1] // right side of the "."
console.log(products.desserts[key1][key2].name)
});

If you are trying to output a string products.desserts.someValue.name, then this will work:
for(let i = 0; i < this.props.auth.cart.length; i++) {
return (
<div>
products.desserts.{this.props.user.cart[i]}.name
</div>
);
}
What you have would work as well, but this is a little cleaner.
If you want to output the variable products.desserts.someValue.name, then you can do something like:
for(let i = 0; i < this.props.auth.cart.length; i++) {
return (
<div>
{products.desserts[this.props.user.cart[i]].name}
</div>
);
}
Basically, only treat the part that is actually dynamic as dynamic, and treat the rest like a normal variable.

Some gotchas:
A component must return a react element(basically a div , span etc in JSX) or null. Make sure you are returning one and only one react element and not multiple. If there are more, wrap them in one and return the wrapper.
If the code you have given is returned from a component, you may do as following:
const items= this.props.auth.cart.map((item, index) => {
let val = products.desserts[this.props.user.cart[index]];
return (
<div>
{val && val.name}
</div>
);
});
Then just return items wrapped in a div.

Remove the string quotes and wrap your JSX in {}:
for(let i = 0; i < this.props.auth.cart.length; i++) {
const item = products.desserts[this.props.user.cart[i]];
return (
<div>
{item ? item.name : 'N/A'}
</div>
);
}