No problem. Ref is pretty useful when a site utilize scrolling as its core design. There may be ways to do it without refs, but, at least, I can’t think of any.
I don’t know what to ask anymore. I tried adding function that erase both fields, editor and preview by using setState but that didn’t work so used custom js function whom targets particular attribute directly. I also added function that makes one of those fields and their headline go fullscreen by doubleClicking on headline itself, example: doubleClick on word “Editor:” makes headline and field itself go fullscreen. Basically that i want to know that didn’t find(yet) how to do that kind a stuff in react. Stuff that @kevinSmith posted works for both title and target attributes.
That’s because you don’t know enough about inter component communication. Take erasing instruction, for example.
You can manage toggle instruction state and conditionally populate the textarea based on that state. So, there is no reliance on the global variable, counter2. Obviously, you’d have to implement the button component and wire it with the app, but it is far better than depending on carefully orchestrated counter variable.
I’m probably gonna fiddle with it when I get some time and post the example.
Thanks again for the patience man. I can make this project in full compliance with react, but then i must exclude all my “advance” dom manipulation features since 99% of them are done outside normal react functionalities.
and you be right. I admit that don’t even know what that phrase means concerning react. Hell, leave and learn … Thanks for not losing it while explaining which i’m well aware since english isn’t my native language and explaining it could be quite a hard work. EDIT: These “features” are not necessary for project completion, it’s just what i added for additional flair.
Frankly, DOM manipulation makes most simple tasks very easy; you just grab it and change it how you want. This could be done right even in some higher scale with good code architecture. However, it is far easier to screw up and there seems to be an upper limit when the project adds more feature. Just take a look at how many codes are touching those two global variables, it is quite daunting.
Inter component communication is how different components receive state from other components. This reduces dumping all states in one component. It is not an official term, I just coined it in a hurry.
Also, the concept of erasing and adding instruction to textarea isn’t a great user experience. For example, when a user wants to see instruction in the middle of typing, your app simply discards all the user input. So, there must be fundamental change in how you present instruction rather than to keep pursue flawed concept.
Sorry of being pain in *rse, but what you think about this code:
Function that erases both fields now done with react only(by my humble knowledge).
eraseIt(){
this.setState({
count: this.state.count+1
});
console.log(this.state.count);
if(this.state.count===0){
this.setState({
messages: [],
markdown: "",
eraser: "Populate"
});
}
if(this.state.count===1){
this.setState({
markdown: placeholder,
count: 0,
eraser: "Erase"
});
}
};
And its button:
<div id="erase"><button id="eraser" onClick={this.eraseIt} type="button" className="btn btn-danger btn-lg" title="This is rather obvious isn't it? It's editor window Sherlock :D">{this.state.eraser}</button></div>
And those fields that will get erased:
<textarea id="editor" className="editor1" onChange={this.handleChange} value={this.state.markdown} placeholder="Enter ... some kind a text!? ..."></textarea>
<div id="preview" className="preview1" dangerouslySetInnerHTML={{__html: marked(this.state.markdown, { renderer: renderer })}} title="It's a preview window, Sherlock ;)"></div>
Stuff that @kevinSmith wrote goes where are all imports are:
var renderer = new marked.Renderer();
renderer.link = function( href, title, text ) {
return '<a target="_blank" href="'+ href +'" title="' + title + '">' + text + '</a>';
};
e.g. like this:
Is it now “kosher”(enough) react so to speak?
Thanks in advance.
Edit:
It was binded
in constructor:
this.eraseIt = this.eraseIt.bind(this);
like this 
Well you surely removed DOM manipulation.
Aside from being React, I don’t really get these:
- Why use counter?
- Why does a text that goes into a button needs to be state?
- What is the use of
messagesarray?
Here’s a scratch for an alternative:
https://codepen.io/gunhoo93/pen/bxNqxy?editors=1010
Sorry i didn’t mentioned earlier. I do all my coding locally with node server. Actual code is quite different now. My codepen code is week+ old by now. Edit:
- I don’t use anymore global counter. I now use this.state.count, and i need to know how many times i clicked before doing erasing and changing text in button.
- I just don’t know how to change it(button text) without doing like this or like i did it previously.
- About messages array , i just forgot to delete from older version of this function.
Well, doesn’t the core concept still applies other than css animations?
Based on what you’ve shown in the previous post, it seems like count is used for toggling instruction and messages is for textarea input, markdown for previewer text. The example I posted does just those but nothing else.
Yes count is used for toggling, messages array is unnecessary so i removed it from function and yes for markdown. So eraseIt() function is ok or not?
Using counter for what is supposed to be a boolean is quite odd. And, again conditional text like eraser is often handled inside render() rather than at a state level. So, I would probably not use this code, if I had choice.
Apparently, there was a minor syntax error in the example. I’ve fixed it and added HelpToggler that shows you conditional rendering.
Care to take a gander at my code? (again) 
Is it ok?
I did what you suggested, but since i’m noob in react and not so well versed in syntax of react, i think i made good enough modifications by following your suggestions:
Did that, and
and that also. I’ve made these modification by looking your code and only on things that i understand good enough. I don’t want to just copy/paste, i want to learn. By providing working example you helped me a lot. Thanks again.
Ps: You have a patience of saint, man.
It is better. Now you need to break your app into components
One major flaw in your implementation is that user input is not preserved if user decides to peek at the instruction. This needs to be fixed, otherwise there is less point in having toggle-able instruction.
Now this is a nitpicking mostly about coding convention:
- You wrote
getMarkdownText()and never using it. - There is no need for
getMarkdownText()to be a method of your component. If you can eliminate unnecessary method from a component, then do it. -
countdoesn’t make sense anymore. There are many candidates to replace such name. e.g. toggle, showInstruction, erase, and etc… -
eraseIt()is not a good name. What is thatIt? -
<label>must target a user interface such as<input>or wraps around it. Apparently, your use of label isn’t semantic.
First and second: deleted it. Third: renamed it into erase. Forth: renamed it to eraseFields. Fifth: Used instead h1.
Edit: I don’t use that button as a help, just for quick erasing instead just grabbing with mouse and pressing delete/backspace. I think you meant deletion. As for saving user’s input after erasing content from fields, that also isn’t present in assignment project as a user story so i didn’t include it.
Edit2: I’ll break it into components later. I’ve been doing this 12+ hours straight. I need a rest.